datart 二开 - 增加自定义代码图形

背景

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

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

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

实现

1. 下载datart 发行包

         datart 下载地址: 

         Tags · running-elephant/datart · GitHub

   datart 发行版 - Gitee.com

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

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

1.  
   /**
2.  
   * Datart
3.  
   *
4.  
   * Copyright 2021
5.  
   *
6.  
   * Licensed under the Apache License, Version 2.0 (the "License");
7.  
   * you may not use this file except in compliance with the License.
8.  
   * You may obtain a copy of the License at
9.  
   *
10.  
    * http://www.apache.org/licenses/LICENSE-2.0
11.  
    *
12.  
    * Unless required by applicable law or agreed to in writing, software
13.  
    * distributed under the License is distributed on an "AS IS" BASIS,
14.  
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15.  
    * See the License for the specific language governing permissions and
16.  
    * limitations under the License.
17.  
    */
18.  
     
19.  
    function CustomChart({ dHelper }) {
20.  
    const svgIcon = `<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1891"><path d="M438.4 849.1l222.7-646.7c0.2-0.5 0.3-1.1 0.4-1.6L438.4 849.1z" opacity=".224" p-id="1892"></path><path d="M661.2 168.7h-67.5c-3.4 0-6.5 2.2-7.6 5.4L354.7 846c-0.3 0.8-0.4 1.7-0.4 2.6 0 4.4 3.6 8 8 8h67.8c3.4 0 6.5-2.2 7.6-5.4l0.7-2.1 223.1-648.3 7.4-21.4c0.3-0.8 0.4-1.7 0.4-2.6-0.1-4.5-3.6-8.1-8.1-8.1zM954.6 502.1c-0.8-1-1.7-1.9-2.7-2.7l-219-171.3c-3.5-2.7-8.5-2.1-11.2 1.4-1.1 1.4-1.7 3.1-1.7 4.9v81.3c0 2.5 1.1 4.8 3.1 6.3l115 90-115 90c-1.9 1.5-3.1 3.8-3.1 6.3v81.3c0 4.4 3.6 8 8 8 1.8 0 3.5-0.6 4.9-1.7l219-171.3c6.9-5.4 8.2-15.5 2.7-22.5zM291.1 328.1l-219 171.3c-1 0.8-1.9 1.7-2.7 2.7-5.4 7-4.2 17 2.7 22.5l219 171.3c1.4 1.1 3.1 1.7 4.9 1.7 4.4 0 8-3.6 8-8v-81.3c0-2.5-1.1-4.8-3.1-6.3l-115-90 115-90c1.9-1.5 3.1-3.8 3.1-6.3v-81.3c0-1.8-0.6-3.5-1.7-4.9-2.7-3.5-7.7-4.1-11.2-1.4z" p-id="1893"></path></svg>`;
21.  
     
22.  
    return {
23.  
    config: {
24.  
    datas: [
25.  
    {
26.  
    label: 'dimension',
27.  
    key: 'dimension',
28.  
    required: false,
29.  
    type: 'group',
30.  
    },
31.  
    {
32.  
    label: 'metrics',
33.  
    key: 'metrics',
34.  
    required: false,
35.  
    type: 'aggregate',
36.  
    },
37.  
    ],
38.  
    styles: [
39.  
    {
40.  
    label: '配置',
41.  
    key: 'graph',
42.  
    comType: 'group',
43.  
    rows: [
44.  
    {
45.  
    label: 'Option',
46.  
    key: 'option',
47.  
    default: '',
48.  
    comType: 'input',
49.  
    },
50.  
    ],
51.  
    },
52.  
    ],
53.  
    settings: [
54.  
    {
55.  
    label: 'viz.palette.setting.paging.title',
56.  
    key: 'paging',
57.  
    comType: 'group',
58.  
    rows: [
59.  
    {
60.  
    label: 'viz.palette.setting.paging.pageSize',
61.  
    key: 'pageSize',
62.  
    default: 1000,
63.  
    comType: 'inputNumber',
64.  
    options: {
65.  
    needRefresh: true,
66.  
    step: 1,
67.  
    min: 0,
68.  
    },
69.  
    },
70.  
    ],
71.  
    },
72.  
    ],
73.  
    },
74.  
    isISOContainer: 'custom-chart',
75.  
    dependency: ['https://lib.baomitu.com/echarts/5.0.2/echarts.min.js'],
76.  
    meta: {
77.  
    id: 'custom-chart',
78.  
    name: 'chartName',
79.  
    icon: svgIcon,
80.  
    requirements: [
81.  
    {
82.  
    group: 1,
83.  
    aggregate: [1, 999],
84.  
    },
85.  
    ],
86.  
    },
87.  
     
88.  
    onMount(options, context) {
89.  
    if ('echarts' in context.window) {
90.  
    this.chart = context.window.echarts.init(
91.  
    context.document.getElementById(options.containerId),
92.  
    'default',
93.  
    );
94.  
    }
95.  
    },
96.  
     
97.  
    onUpdated(props) {
98.  
    if (!props.dataset || !props.dataset.columns || !props.config) {
99.  
    return;
100.  
     }
101.  
     if (!this.isMatchRequirement(props.config)) {
102.  
     this.chart?.clear();
103.  
     return;
104.  
     }
105.  
     const newOptions = this.getOptions(props.dataset, props.config);
106.  
     this.chart?.setOption(Object.assign({}, newOptions), true);
107.  
     },
108.  
      
109.  
     onUnMount() {
110.  
     this.chart && this.chart.dispose();
111.  
     },
112.  
      
113.  
     onResize(opt, context) {
114.  
     this.chart && this.chart.resize(context);
115.  
     },
116.  
      
117.  
     getOptions(dataset, config) {
118.  
     const styleConfigs = config.styles;
119.  
     const dataConfigs = config.datas || [];
120.  
     const groupConfigs = dataConfigs
121.  
     .filter(c => c.type === 'group')
122.  
     .flatMap(config => config.rows || []);
123.  
     const aggregateConfigs = dataConfigs
124.  
     .filter(c => c.type === 'aggregate')
125.  
     .flatMap(config => config.rows || []);
126.  
      
127.  
     const chartDataSet = dHelper.transformToDataSet(
128.  
     dataset.rows,
129.  
     dataset.columns,
130.  
     dataConfigs,
131.  
     );
132.  
      
133.  
     console.log('dataset', dataset)
134.  
     console.log('chartDataSet', chartDataSet)
135.  
     console.log('groupConfigs', groupConfigs)
136.  
     console.log('aggregateConfigs', aggregateConfigs)
137.  
     console.log('styleConfigs', styleConfigs[0].rows[0].value)
138.  
      
139.  
     let option;
140.  
      
141.  
     eval(styleConfigs[0].rows[0].value)
142.  
      
143.  
     return option;
144.  
     },
145.  
     };
146.  
     }

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

Echarts 配置参考网址: 

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

https://www.makeapie.cn/

这篇好文章是转载于：学新通技术网