背景

由于项目上的一些特殊需求, 需要对增加一些不确定的图形, 以及对一些细节进行调整;

得益于 datart 的自定义插件化图表功能, 为了灵活起见, 直接开放一个通过配置 options 来渲染图形的组件;

自定义插件化图表文档地址:  自定义插件化图表 | datart

实现

1. 下载datart 发行包

         datart 下载地址: 

         Tags · running-elephant/datart · GitHub

   datart 发行版 - Gitee.com

2. 在 static 目录下新建 custom-chart-plugins 文件夹 ;

 3. 在目录下新建js 插件文件 custom-chart.js

/*** Datart** Copyright 2021** Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/function CustomChart({ dHelper }) {const svgIcon = ``;return {config: {datas: [{label: 'dimension',key: 'dimension',required: false,type: 'group',},{label: 'metrics',key: 'metrics',required: false,type: 'aggregate',},],styles: [{label: '配置',key: 'graph',comType: 'group',rows: [{label: 'Option',key: 'option',default: '',comType: 'input',},],},],settings: [{label: 'viz.palette.setting.paging.title',key: 'paging',comType: 'group',rows: [{label: 'viz.palette.setting.paging.pageSize',key: 'pageSize',default: 1000,comType: 'inputNumber',options: {needRefresh: true,step: 1,min: 0,},},],},],},isISOContainer: 'custom-chart',dependency: ['https://lib.baomitu.com/echarts/5.0.2/echarts.min.js'],meta: {id: 'custom-chart',name: 'chartName',icon: svgIcon,requirements: [{group: 1,aggregate: [1, 999],},],},onMount(options, context) {if ('echarts' in context.window) {this.chart = context.window.echarts.init(context.document.getElementById(options.containerId),'default',);}},onUpdated(props) {if (!props.dataset || !props.dataset.columns || !props.config) {return;}if (!this.isMatchRequirement(props.config)) {this.chart?.clear();return;}const newOptions = this.getOptions(props.dataset, props.config);this.chart?.setOption(Object.assign({}, newOptions), true);},onUnMount() {this.chart && this.chart.dispose();},onResize(opt, context) {this.chart && this.chart.resize(context);},getOptions(dataset, config) {const styleConfigs = config.styles;const dataConfigs = config.datas || [];const groupConfigs = dataConfigs.filter(c => c.type === 'group').flatMap(config => config.rows || []);const aggregateConfigs = dataConfigs.filter(c => c.type === 'aggregate').flatMap(config => config.rows || []);const chartDataSet = dHelper.transformToDataSet(dataset.rows,dataset.columns,dataConfigs,);console.log('dataset', dataset)console.log('chartDataSet', chartDataSet)console.log('groupConfigs', groupConfigs)console.log('aggregateConfigs', aggregateConfigs)console.log('styleConfigs', styleConfigs[0].rows[0].value)let option;eval(styleConfigs[0].rows[0].value)return option;},};
}

4. 刷新页面, 选择新加的图形, 切换到 样式栏, 将从echarts 官网实例上拷贝 options 内容粘贴到配置-Option 输入框中;

Echarts 配置参考网址: 

https://echarts.apache.org/examples/zh/index.html

https://www.makeapie.cn/