echarts 同时控制多个图表的属性值变更

发布时间：2019-03-15 14:11:40 修改时间：2019-03-15 14:12:16 阅读：7444 评论：0 0

echarts v4.x 版本如何同时控制多个图标的属性值变更





简单理解：

echarts为一个对象形式出现在代码中，通过 Canvas、SVG（4.0+）、VML 的形式渲染图表







实现方法：

echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图表





需求：

将页面多个图表渲染完成后 选择更新数据或者查看固定时间段区域数据等按钮实现动态的改变echarts的图表数据表现。





分析：

1、首先对于echarts而言，每个图表都是一个单独的echarts对象，那么我们只需要将每个对象获取到并通过getOption()函数获取到每个对象的属性，并对其赋值。

2、然后通过setOption(echartsObject)方法对其执行渲染就可以了（echartsObject为每个echarts对象）。





设计思路：

1、设置一个全局数组用来装入每一个echarts对象。

var myCharts=[];

然后在每个echarts实例化完成后将当前的echarts对象放进myCharts数组中。

function darwChart(id, monitorItemData, monitorItemDecimal,oiltime) {

    ...

    var chartid = "chart_" + id;

    chartid = echarts.init(dom);

    chartid.setOption(option={...})

    myCharts.push(chartid);

    ...

}

注：这里说明id为每个表加载的时候获取的数据id，本人通过这个id来区分不同的echarts对象，如果设置多个方法互相不关联，可以不用这么写，这里自由分配，主要理解实现思想。


2、然后外部按钮触发事件的方法：循环赋值实现，这里就简单了。ok，祝你成功。


function gettimeradio(){

    var rr = $('input:radio[name="r2"]:checked').attr('id');

    Xmin = getDateTime(rr);

    Xmax = getDateTime(0);

    myCharts = Array.from(new Set(myCharts));

    myCharts.forEach(data=>{

        var chart = data.getOption();

        chart.xAxis[0].min =Xmin ;

        chart.xAxis[0].max =Xmax ;

        data.setOption(chart);    

    })

}

---