[]
        
在线Demo 免费试用
(Showing Draft Content)

Echarts自定义行为

功能概述

ECharts 插件与普通内置图表另一大不同点是可以使用JS进行图表行为的自定义。

image

自定义行为窗口编写区可直接编写JS代码,可以获取到 ECharts 实例对象 myChart(接口申明:https://echarts.apache.org/en/api.html#echartsInstance) ,另外支持使用setTimeout/setInterval来自定义图表的行为,实现实时动态图表内容变化。

执行脚本时机支持选择‘组件渲染后’。

示例

例如使用setInterval函数实现柱状图的轮播,预览效果如下:

loop

具体代码如下,供您参考。

setInterval(() => {
    if(option.dataZoom[0].endValue==option.xAxis.data.length){
    option.dataZoom[0].startValue=2;
    option.dataZoom[0].endValue=0;
  }else{
  	option.dataZoom[0].endValue+=1;
    option.dataZoom[0].startValue+=1;
  }
	myChart.setOption(option);
},2000)