{widget}.js

文件介绍

{widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。

文件示例

• 通用的组件核心代码

  var EchartsWidgetTemplate = StudioWidgetWrapper.extend({
    /*
     * 组件初始化入口API,初始化组件通用能力，负责注册组件事件和组件动作
     */
    init() {},
  
    /**
     * 组件核心渲染api，负责组件的实例化、数据调用及事件、动作的实际实现
     */
    render() {},
  
    /**
     * 组件销毁回调事件，负责组件在销毁期间的内存释放逻辑实现，需要把组件绑定的一些dom事件及全局的引用销毁
     */
    beforeDestroy() {},
  
      /**
       * 统一获取组件桩数据，建议实现
       */
      getMockData() {},
  })

• 组件的整体代码

  var EchartsWidgetTemplate = StudioWidgetWrapper.extend({
    /*
     * 组件初始化入口API,初始化组件通用能力，负责注册组件事件和组件动作
     */
    init() {
      this._super.apply(this, arguments); // 组件通用能力构建，调用父类constructor,必须要写
      this.getWidgetI18n().then(() => this.render()); // 渲染组件
    },
  
    /**
     * 组件核心渲染api，负责组件的实例化、数据调用及事件、动作的实际实现
     */
    render() {
      const widgetContainer = this.getContainer();
      if (!widgetContainer) return;
      this.initI18n();
      this.initReaderVm(this.getProps(), widgetContainer);
      this.registerWidgetActionAndEvent();
      this.registerResizeEvent(() => this?.readerVm?.echartsInst?.resize());
    },
  
    /**
     * 组件销毁回调事件，负责组件在销毁期间的内存释放逻辑实现，需要把组件绑定的一些dom事件及全局的引用销毁
     */
    beforeDestroy() {
      $(window).off("resize");
      this.readerVm && this.readerVm.$destroy && this.readerVm.$destroy();
    },
  
    /**
     *
     * @returns 初始化组件message-en,message-zh的多语言信息，统一注册到独立的i18nVue实例中。供组件获取桩数据、获取默认配置、初始化组件统一使用
     */
    initI18n() {
      const i18n = window.HttpUtils.getI18n({
        locale: window.HttpUtils.getLocale(),
        messages: this.getMessages(),
      });
  
      const i18nVM = new window.Vue({ i18n });
      this.$t = (key) => i18nVM.$t(key);
    },
    getProps() {
      const props = this.getProperties() || {};
      const commonProps = $.extend(
        true,
        {},
        {  emphasisFocus: 'series', showLabel: true, axisPointerType: 'shadow' },
        JSON.parse(props.commonProps || "{}")
      );
      return { commonProps };
    },
  
    /**
     * 初始化运行态组件VM实例
     * @param {*} props 组件配置项
     * @param {*} widgetContainer 组件容器
     */
    initReaderVm(props, widgetContainer) {
      const { commonProps } = props;
      const thisObj = this;
      thisObj.readerVm = new window.Vue({
        el: $("#EchartsWidgetTemplate", widgetContainer)[0],
        data() {
          return {
            commonProps,
            dataValue: [],
            echartsInst: null,
            ConnectorIns: thisObj.getConnectorInstanceByName('EchartsWidgetTemplateConnector') || '',
          };
        },
        mounted() {
          this.echartsInst = window.echarts.init(this.$refs.echartsDom);
          this.echartsInst.on('click', 'series', (event) => {
            thisObj.triggerEvent("clickSeries", event);
          });
          thisObj.callFlowConn(this.ConnectorIns, {}, (res) => {
            this.dataValue = res;
            this.drawEcharts();
          });
        },
        methods: {
          drawEcharts() {
            const dataX = [...new Set(this.dataValue.map((row) => row.x))];
            this.echartsInst.setOption({
              xAxis: {
                type: 'category',
                data: dataX,
              },
              yAxis: {
                type: 'value',
              },
              series: [...new Set(this.dataValue.map((row) => row.s))].map((key) => ({
                data: dataX.map((x) => this.dataValue.find((item) => item.x === x && item.s === key)?.y),
                name: key,
                type: 'bar',
                emphasis: { focus: this.commonProps.emphasisFocus },
                label: {
                  show: this.commonProps.showLabel,
                  distance: this.commonProps.labelDistance,
                },
              })),
              tooltip: {
                trigger: 'axis',
                axisPointer: { type: this.commonProps.axisPointerType }
              },
            });
          },
          highlightSeries({ eventParam }) {
            this.echartsInst.dispatchAction({ type: 'highlight', seriesIndex: eventParam.seriesIndex });
          },
        }
      });
    },
  
    /**
     * 注册组件对外暴露的的事件和动作
     */
    registerWidgetActionAndEvent() {
      if (!window.Studio) {
        return;
      }
  
      window.Studio.registerEvents(this, "clickSeries", { zh_CN: "点击系列", en_US: "Click Series" });
  
      window.Studio.registerAction(
        this,
        "highlightSeries",
          { zh_CN: "高亮系列", en_US: "Highlight Series" },
        [],
        (...args) => this.readerVm.highlightSeries(...args),
      );
    },
  
  
    /**
     * 自定义api，组件在没有对接外部数据源时使用的桩数据，桩数据结构统一为二维数组对象
     * @returns [{}]
     */
    getMockData() {
      return [
        {
          "x": "00:00",
          "y": 11.69,
          "s": "服务水位"
        },
        {
          "x": "02:30",
          "y": 17.46,
          "s": "服务水位"
        },
        {
          "x": "05:00",
          "y": 28.57,
          "s": "服务水位"
        },
        {
          "x": "07:30",
          "y": 12.7,
          "s": "服务水位"
        },
        {
          "x": "10:00",
          "y": 18.99,
          "s": "服务水位"
        },
        {
          "x": "12:30",
          "y": 3.7,
          "s": "服务水位"
        },
        {
          "x": "15:00",
          "y": 18.52,
          "s": "服务水位"
        },
        {
          "x": "17:30",
          "y": 23.81,
          "s": "服务水位"
        },
        {
          "x": "20:00",
          "y": 10.58,
          "s": "服务水位"
        },
        {
          "x": "22:30",
          "y": 15.82,
          "s": "服务水位"
        },
        {
          "x": "24:00",
          "y": 3.76,
          "s": "服务水位"
        },
        {
          "x": "00:00",
          "y": 5.69,
          "s": "服务载荷"
        },
        {
          "x": "02:30",
          "y": 12.46,
          "s": "服务载荷"
        },
        {
          "x": "05:00",
          "y": 18.57,
          "s": "服务载荷"
        },
        {
          "x": "07:30",
          "y": 25.7,
          "s": "服务载荷"
        },
        {
          "x": "10:00",
          "y": 13.99,
          "s": "服务载荷"
        },
        {
          "x": "12:30",
          "y": 9.7,
          "s": "服务载荷"
        },
        {
          "x": "15:00",
          "y": 20.52,
          "s": "服务载荷"
        },
        {
          "x": "17:30",
          "y": 28.81,
          "s": "服务载荷"
        },
        {
          "x": "20:00",
          "y": 15.58,
          "s": "服务载荷"
        },
        {
          "x": "22:30",
          "y": 19.82,
          "s": "服务载荷"
        },
        {
          "x": "24:00",
          "y": 9.76,
          "s": "服务载荷"
        }
      ];
    },
  });