title: Vue2组件化集成 icon: category: guide tags:

• 开发者

安装依赖

• 项目与关键模块版本

{
  "vue": "^2.6.14",
  "vue-i18n": "^8.28.2",
  "vuex": "^3.0.1",
  "element-ui": "^2.15.12"
}

• 安装第三方npm依赖

npm install element-ui axios numbro tippy.js file-saver countup.js moment 

项目中原本已经存在的依赖可以不用重复安装

:::details ElementUI按需引入

• 如果您项目中没有用到明细表格，可以不引入element-ui
• 如果您项目中使用的是其他的ui库，又需要使用明细表格，可以按需导入明细表依赖的组件

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

import {
  Table,
  TableColumn,
  Loading,
  Row,
  Pagination,
  Popover,
  Input,
  Select,
  Option,
  CheckboxGroup,
  Checkbox
} from 'element-ui';

[Table, TableColumn, Loading, Row, Pagination, Popover, Input, Select, Option, CheckboxGroup, Checkbox].forEach(e => Vue.use(e));

:::

:::details IBI使用的element-ui定制化说明 IBI对element-ui做了一些个性化定制工作，如：明细表分页按钮样式配置、颜色拾取器风格、各种表单样式属性等，但基本不影响原生功能， 如果您需要整合之后呈现的效果与IBI一致可以把

import ElementUI from 'element-ui';

Vue.use(ElementUI);

修改为

import ChuguoUI from 'chuguo-ui';

Vue.use(ChuguoUI);

:::

• 安装IBI npm依赖

npm install @chuguotech/ibi-vue2-comp

• 其他外挂依赖

$ tree -L 1 vendor
vendor
├── echarts
├── font-awesome-4.7.0
├── jQuery
├── jQueryUI
├── jquery-contextmenu
└── exceljs.min.js

如果你使用的vue-cli创建的项目，可以参考下面的demo项目

Demo项目地址

开始

组件注册

import IbiComp from '@chuguotech/ibi-vue2-comp';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// ElementUI
Vue.use(ElementUI);

// 安装IbiComp
Vue.use(IbiComp, {
    baseServerUrl: 'http://localhost:8026/cboard' // IBI 服务地址
});

整合外部vue-i18n

如果您的项目中已经存在i18n国际化配置，可以使用下面办法融合ibi国际化配置

import Vue from 'vue'
import VueI18n from 'vue-i18n';
import { enLocale, zhLocale } from '@chuguotech/ibi-vue2-comp'

const messages = {
    en: {
        ...enLocale,
        message: {
            hello: 'hello world'
        }
    },
    cn: {
        ...zhLocale,
        message: {
            hello: '你好世界'
        }
    }
};

Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: 'cn', // 设置地区
    messages, // 设置地区信息
});


Vue.use(IbiComp, {
    baseServerUrl: 'http://localhost:8026/cboard' // IBI 服务地址
    i18n //注册IbiComps时传入i18n对象
});

整合外部Vuex

如果您的项目中已经存在Vuex, 可以用下面的办法混入ibiStore模块

import Vue from 'vue';
import Vuex from 'vuex';
import { ibiStore } from '@chuguotech/ibi-vue2-comp';

Vue.use(Vuex);

const store = Vuex.Store({
    state: {
        ... // 您的项目中原有啊Vuex定义
    },
    modules: {
        ...ibiStore.modules // 混入ibiStore模块
    }
});

Vue.use(IbiComp, {
    baseServerUrl: 'http://localhost:8026/cboard' // IBI 服务地址
    store //注册IbiComps时传入store对象
});

IbiChart组件

用来展示IBI中的所有图表

• 支持图表类型包含：交叉表、ECharts图表、KPI、明细表
• 支持参数配置响应
• 支持联动事件
• 支持表格数据下载

<ibi-chart
        :chart-id="chartId"
        isInBoard
>
</ibi-chart>

认证

我们知道访问IBI中的资源需要权限认证，IbiChart组件支持以下认证方式

• 用户名密码props传递认证
• SDK API统一认证
• IBI Token认证

用户名密码props传递认证

对于安全性要求不高的整合可以使用用户名密码的形式认证，认证用户名和密码可以通过表单动态传入，比如在展示图表之前让用户交互式传入用户名密码

<ibi-chart
        :chart-id="chartId"
        username="xxx"
        password="xxx"
        isInBoard
>
</ibi-chart>

SDK API统一认证

在图表加载之前认证一次即可，

import IbiComp, { cboardCommon } from '@chuguotech/ibi-vue2-comp';

cboardCommon.loginService.auth('xxx', 'xxx').then(response => {
  const {valid} = response.data;
  if (valid) {
    new Vue({
      i18n,
      store,
      router,
      render: h => h(App),
    }).$mount('#app')
  }
});

// 后续组件加载不需要传入认证信息

<ibi-chart
    :chart-id="chartId"
    isInBoard
>
</ibi-chart>

Token认证

需要传入IBI认可的Token

<ibi-chart
        :chart-id="chartId"
        token="xxx"
        isInBoard
>
</ibi-chart>

参数

<div>
<el-select v-model="params[0].values" multiple>
    <el-option value="Mexico"></el-option>
    <el-option value="Canada"></el-option>
</el-select>
<el-button @click="query">Query</el-button>
</div>

<ibi-chart
    :chart-id="chartId"
    :params="params"
    isInBoard
    watchParam
>
</ibi-chart>

params格式

// 参数数据，一个图可以接收多个参数
params: [BoardParam]

// 参数对象
class BoardParam {
    type: String // 过滤的类型 =, ≠, >, <, ≥, ≤, like, not like, [a, b]
    values: String[] // 过滤设定值
    col: ParamLink[] // 参数关联对象，一个参数可以关联到对个对象
}

// 关联对象, 一个参数可以关联到对个对象
class ParamLink {
    // 设定关联对象类型
    type: String // ‘dataset’, 'widget', 'report,
    // 设定关联对象ID
    targetId: String | Number // 如: 数据集ID， 图表
    // 设定具体关联的维度或者字段，当type为dataset、widget的时候设定
    col: String // 字段名
    // 当type为report的时候设定
    targetId: String  // ibi-report组件的sid
    datasetName: String // 报表组件中的数据集名称
    column: {
        name: String // 改报表数据集的字段
    }
}

// 参数格式简单样例
params: [{
    col: [{datasetId: 1, col: 'sales_country',}],
    type: '=',
    values: ['Canada'],
}, {
    col: [{datasetId: 1, col: 'age',}],
    type: '>',
    values: [30],
}]

// report参数格式样例
rptParams: [{
    type: '=',
    values: [],
    col: [{
        type: 'report',
        targetId: rptId,
        datasetName: 'invoice-mtd',
        column: {
            name: 'bus_type'
        }
    }]
}]

watchParam

监控参数变动即时更新图表

通过vuex store发送全局图表更新消息

<el-button @click="query">Query</el-button>

import { boardStore } from '@chuguotech/ibi-vue2-comp';

methods: {
  query() {
    this.updateBoardParamsTick(true);
  },
  ...boardStore.boardMapMutations({
    updateBoardParamsTick: boardStore.M_BOARD_PARAMS_TICK,
  }),
}

联动

relations联动定义

<ibi-chart
        :chart-id="chartId"
        :relations="relations"
        isInBoard
>
</ibi-chart>

relations: {
    excludeSelf: true,
    links: [{
      type: 'dataset',
      targetId: 1,
      conditions: [{
          source: {
              type: 'row',
              index: 0,
              column: 'the_year',
          },
          target: {
              column: 'the_year'
          },
        }],
    }]
}

样式

<ibi-chart
        :chart-id="chartId"
        :relations="relations"
        :extOption="extOption"
        isInBoard
>
</ibi-chart>

expOption格式

• 配置Option样式融合 通过传入与原图样式配置结构一致的对象覆盖修改样式

extOption = {
    title: {
        text: '名称改变'
    }
}

• 钩子函数

优势：通过回调函数修改样式，该方法的优势是能够debug，与IBI中ECharts图表开发者模式原理一致，在render之前被调用，然后通过代码修改，好处是方便debug
缺点：该模式目前仅支持ECharts图表

 extOption = {
  devTool: {
    beforeRender(option) {
      console.log(option);
      _.merge(option, {
        title: {
          text: '名称改变',
        }
      })
    },
    beforeDestroy(echartsInstance) {
      //
    }
  }
}