ECharts best practices

For performance and security considerations, follow these best practices for your widgets.
  • Follow the script standards recommended by the Apache ECharts website.
  • Use the
    Appearance editor
     to configure widget style and format and the
    Connection editor
     to update data.
  • Avoid having any endless loops in the JavaScript. With such JavaScript, a display may stop responding.
  • Manage user accessibility to the display with ECharts, so that only users with proper permissions can edit the display at design time run the display at runtime.
  • Avoid using the setOption or getOption function to update data, which may result in problems like memory leak. Instead, use configuration item and data.
    For example, don't use the following script. 
    option = {
  series: [{
    markPoint: {
      symbol: 'none'
    },
    data: [{
       value: oee
    }
    ]
 }, {
    itemStyle: {
       color: oeecol
    },
    data: [{
       value: wrnL
    }
    ]
 }, {
    detail: {
       backgroundColor: availcol
    },
    data: [{
       value: avail
    }
    ]
 }, , {
    detail: {
       backgroundColor: perfcol
    },
    data: [{
       value: perf
    }
    ]
 }, , {
    detail: {
       backgroundColor: qualcol
    },
    data: [{
       value: qual
    }
    ]
 }
 ]
};
Instead, use the following script.
option.series[0].data[0].value = oee;
option.series[1].itemStyle.color = oeecol;
option.series[1].data[0].value = wrnL;
option.series[2].detail.backgroundColor = availcol;
option.series[2].data[0].value = avail;
option.series[3].detail.backgroundColor = perfcol;
option.series[3].data[0].value = perf;
option.series[4].detail.backgroundColor = qualcol;
option.series[4].data[0].value = qual;
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal