[]
ECharts 插件与普通内置图表另一大不同点是可以使用JS进行图表行为的自定义。
自定义行为窗口编写区可直接编写JS代码,可以获取到 ECharts 实例对象 myChart(接口申明:https://echarts.apache.org/en/api.html#echartsInstance) ,另外支持使用setTimeout/setInterval来自定义图表的行为,实现实时动态图表内容变化。
执行脚本时机支持选择‘组件渲染后’。
例如使用setInterval函数实现柱状图的轮播,预览效果如下:
具体代码如下,供您参考。
//自定义行为
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)
//自定义属性
delete option.dataZoom[0].end
delete option.dataZoom[0].start
option.dataZoom[0].endValue = 0;
option.dataZoom[0].startValue = 2
return option
前提:开启缩放轴