文件介绍及示例

文件介绍

{widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor.js文件只在组件编辑状态被加载，主要包括propertiesConfig方法和create方法。

文件示例

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', {});