文件示例 EchartsWidgetTemplate = EchartsWidgetTemplate.extend({ // 组件事件配置项，定义组件事件结构及说明，给全局变量映射使用 eventConfig: { clickSeries: { desc: { zh_CN: "点击系列", en_US: "Click Series" }, fields: [ { name: 'seriesIndex', desc: { zh_CN: '系列索引', en_US: 'Series Index' }, }, { name: 'seriesName', desc: { zh_CN: '系列名', en_US: 'Series Name' }, }, ], }, }, // 配置项大的分类 classfication: [[{ name: 'configuration' }, { name: 'tooltip' }]], // 组件详细配置 propertiesConfig: [ { config: [ { type: 'dataSetting', mapping: { x: { keyName: 'dataX', keyTitle: { zh_CN: 'X轴数据', en_US: 'X axis Data' }, limitNumber: '1', type: 'category', label: 'x', required: true, }, y: { keyName: 'value', keyTitle: { zh_CN: 'Y轴数据', en_US: 'Y axis Data' }, limitNumber: '1', type: 'value', label: 'y', required: true, }, s: { label: 's', limitNumber: '1', series: [ { type: '', label: '', required: false, }, ], }, }, mock: {}, name: 'EchartsWidgetTemplateConnector', model: 'CommonViewModel', }, ], }, { migrateFrom: 'advancedSettings', headerTitle: { zh_CN: '数据映射', en_US: 'Data Mapping' }, belong: 'configuration', config: [ { type: 'select', name: 'commonProps.emphasisFocus', label: { zh_CN: '高亮时淡出', en_US: 'Emphasis Focus' }, value: 'series', options: [ { label: { zh_CN: '不淡出其它图形', en_US: 'None' }, value: 'none', }, { label: { zh_CN: '只聚焦当前高亮的数据的图形', en_US: 'Self' }, value: 'self', }, { label: { zh_CN: '聚焦当前高亮的数据所在的系列的所有图形', en_US: 'Series' }, value: 'series', }, ], }, { type: 'tab', name: 'commonProps.showLabel', label: { zh_CN: '显示标签', en_US: 'Emphasis Focus' }, value: true, options: [ { label: { zh_CN: '显示', en_US: 'Show' }, value: true, }, { label: { zh_CN: '隐藏', en_US: 'Hide' }, value: false, }, ], }, ], }, { migrateFrom: 'advancedSettings', headerTitle: { zh_CN: '提示', en_US: 'Tooltip' }, belong: 'tooltip', config: [ { type: 'select', name: 'commonProps.axisPointerType', label: { zh_CN: '指示器', en_US: 'Axis Pointer' }, value: 'shadow', options: [ { label: { zh_CN: '直线指示器', en_US: 'Line' }, value: 'line', }, { label: { zh_CN: '阴影指示器', en_US: 'Shadow' }, value: 'shadow', }, { label: { zh_CN: '无指示器', en_US: 'None' }, value: 'none', }, ], }, ], } ], // 仅在组件首次被创建时调用一次，必填 create: function (cbk) { if (cbk) { this._super(); cbk(); } }, }); // 注册组件，必填 window.Studio.registerWidget('EchartsWidgetTemplate', 'EchartsWidgetTemplate', {});

自定义分类 自定义分类时，可以使用分类的对象形式，对象中可以配置的字段如下表所示。 表2 自定义分类对象中的字段 字段 类型 示例 说明 tip Object tip: { "zh_CN": "图形", "en_US": "Series" } 鼠标悬浮提示，采用对象形式。 name String name: "code" 分类的key及系统预置的图标。name值为预置类型时，tip和iconSrc非必填。name字段值应与belong字段映射。 iconSrc String iconSrc: "image/setting.png" 图标地址。组件文件下，image文件中的setting.png。

classfication示例 classfication配置示例如下，其对应效果如图1所示。 classfication: [ [ { name: 'card', }, { name: 'configuration', }, { tip: { zh_CN: '图形', en_US: 'Figure', }, name: 'figure', iconSrc: 'image/series.png', }, ], ], 图1 设置后效果

预置分类 预置分类为AstroCanvas预置的分类，包含的图标和名称如下所示： 表1 预置分类包含的图标和名称 name 分类 图标关键字 图标 说明 card 卡片-自定义 card - configuration 配置-自定义 configuration 组件级的配置项建议放到该分类中，如背景、标题等。 series 图形-自定义 series 图表的系列数据配置。 legend 图例-自定义 legend 图表的图例显示/隐藏、样式控制配置。 tooltip 提示-自定义 tooltip 图表的悬浮提示配置。 coordinate 坐标轴-自定义 coordinate 图表的X、Y坐标轴配置。 referenceLine 参考线-自定义 referenceLine 图表的X、Y轴参考线配置。 metrics 指标-自定义 metrics 图表的指标配置，如显示/隐藏、内容和样式控制。