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

自定义行为

功能概述

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)
//自定义属性
delete option.dataZoom[0].end
delete option.dataZoom[0].start
option.dataZoom[0].endValue = 0;
option.dataZoom[0].startValue = 2
return option

前提:开启缩放轴

PixPin_2025-04-09_18-16-52