wp-chart-design

vue-cp

1. 安装

使用 npm 的方式安装，写此文档时版本为 wp-chart-design@0.2.11-beta.71

npm i wp-chart-design -S

2. 引入看板

在 main.js 中写入以下内容，全局注册组件（组件内部使用了vuex，需传递store参数至组件内部注册内部vuex module）：

import Vue from 'vue'
import wpChartDesign from 'wp-chart-design'
import 'wp-chart-design/lib/wpChartDesign.css'

Vue.use(wpChartDesign, { store })

3. 使用

<template>
    <wp-chart-design
      app-id="appid" -- 数据源信息接口参数
      business-id="businessId" -- 看板id
      source-id="sourceId" -- 数据源id
      bi-openId="biOpenId" -- 外部分享id
      chart-design-name="name" -- 看板标题
      :data-type-list="dataTypeList" -- 开放出来的可选数据类型,['modelData', 'staticData'] | ['applicationData', 'staticData']
      preview-mode="false" -- 是否是预览模式
      is-show-close="false" -- 是否显示左上角关闭按钮
      need-request="true" -- 是否需要请求看板数据
      immediate-refresh="false" -- 保存完是否立即刷新列表
    -- 以下路径可以根据自己定义的路径替换
      save-url="/bi/kanban/myKanban/saveChart" -- 保存图表
      chart-list-url="/bi/kanban/common/front/myKanban/findByModuleId" -- 获取看板数据接口
      data-source-url="/bi/kanban/myKanban/getModel" -- 获取模型
      dimension-measure-url="/bi/kanban/myKanban/getModelDimensionAndIndex" -- 获取维度、度量
      static-data-url="/quickapp/dashBoard/ydchart/olapResultStatic" -- 根据静态数据获取组件数据接口
      component-data-url="/bi/kanban/myKanban/builderChart" -- 生成图表
      componentBaseListUrl="/bi/portrait/personal/management/chart" -- 获取组件接口地址                         
      componentLibraryListUrl="/bi/portrait/personal/management/findComponentsBySortIdentifier" -- 根据组件类型获取类型下所有组件库图表接口地址
      componentLibraryDetailUrl="/bi/portrait/personal/management/findComponentById" -- 根据组件库图表id获取图表详情数据
      get-default-list-url="/bi/kanban/myKanban/searchChartData" -- 获取默认筛选值列表接口
      filter-field-url="/bi/portrait/personal/management/getEnumList" -- 获取过滤字段可选内容接口
      @close="closeEvent" -- 点击左上角关闭按钮调用的函数
    ></wp-chart-design>
</template>