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

Echarts自定义行为

功能概述

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

image

自定义行为窗口编写区可直接编写JS代码,使用setTimeout/setInterval/myChart(echart实例)等来自定义图表的行为,实现实时动态变化图表内容。

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

示例

例如使用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)