扩展开发一个新的图表 |
数据洞察提供了扩展开发 Echarts 图表的能力。若数据洞察原有的图表类型不能满足实际项目需求，您只需编写少量代码，即可方便、快捷地扩展出想要的图表。若您扩展的图表需支持在右侧属性面板选择图表数据输入字段等设置，数据洞察也提供了下拉选择器、输入框、按钮供您扩展开发使用。
图1 图表 图2 属性面板
扩展图表前，请先阅读数据洞察 WebApp 扩展流程。本节仅介绍图表的扩展开发步骤。
第一步：在创建的图表 js 文件中，实例化 iDataInsights.Plugins.Chart，代码如下所示：
const chart = {
// 图表类型 英文，全大写
type: 'CUSTOM',
// 缩略图 base64编码 或 图片路径
thumbnail: './libs/plugins/images/xxx.png',
// 图表名称
name: '自定义图表',
// 图表描述 建议不超过10个字符
remark: '自定义图表描述内容'
}
const chartInstance = new iDataInsights.Plugins.Chart([chart]);
其中：
type，定义扩展图表的类型，不能与数据洞察已有图表类型重名。
thumbnail，设置扩展图表在属性面板展示的缩略图，对应图2 中红色1标识的区域中的图片。
name，扩展图表的名称，对应图2 中红色1标识的区域中上方的粗体文字。
remark，扩展图表的描述，对应图2 中红色1标识的区域中下方的文字。
第二步：创建图表的配置项，并调用 bindCreateOption 接口，将图表配置项绑定到图表实例，如下所示。其中，创建的图表配置项，需符合 Echarts 配置项。
chartInstance.bindCreateOption(createOption);
第三步：创建图表数据输入项所需的组件（如上图2 中红色2标识的区域中的下拉框、文本框、按钮），并调用 registerComponents 接口，将之注册到图表实例。代码如下所示。其中可创建的组件目前仅支持选择器、输入框、按钮，组件接口请参阅：组件接口。（该步为可选步骤）
chartInstance.registerComponents(components);
注意：
1. 若组件 props 需要用到图表原始数据中的值，可以在 registerComponents 时传递初始化参数（如：'', [], {}等），然后在 createOption 中调用 updateComponent 方法对组件进行更新。
2. 建议使用自执行函数包裹整个 js 文件，避免变量冲突，污染全局对象。
3. 自定义图表目前不支持过滤器、样式、分析等功能。
参考：