datart 二开 - 增加自定义代码图形
背景
由于项目上的一些特殊需求, 需要对增加一些不确定的图形, 以及对一些细节进行调整;
得益于 datart 的自定义插件化图表功能, 为了灵活起见, 直接开放一个通过配置 options 来渲染图形的组件;
自定义插件化图表文档地址: 自定义插件化图表 | datart
实现
1. 下载datart 发行包
datart 下载地址:
Tags · running-elephant/datart · GitHub
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 = `<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>`;
-
-
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/
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgabcci
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24