首页 > echarts.js图表——只用一个图表,点击某个按钮切换不同数据值。不知道怎么写

echarts.js图表——只用一个图表,点击某个按钮切换不同数据值。不知道怎么写

当点击餐后,这个图表不变,直接切换餐后的数据值,不知道怎么写?
我想到最笨的方法就是直接拷贝option命名为option2,里面的series的data为餐后数据值。但是option和option2的grid,tooltip等代码是重复的(除了x轴的值和data的值不同外),不知道怎么合并一起。


请查下文档使用series相关接口,不需要两个option.
假设你这里餐前,餐后,分别调用了
redraw('before')和redraw('after')
在这个方法中,大致可以这么做
$("#container").echarts().option.series[0].data=另外种数据的状态。
或者改变option后,执行$("#container").echarts().destory().setOption(option);

手机打字,以上代码只说明思路,明天或者验证后形成正确代码,请参考官方文档,或github issue等。


写好一个基础的,然后用jQuery深拷贝一个,通过赋值就OK了。下面是我之前写的一段代码,可以借鉴

javascriptvar ptnMap = {
    title: {
        text : '我的标题',
        x: "center"
    },
    tooltip : {
        trigger: 'item',
        textStyle: {
            align:'left'
        }
    },
    toolbox: {
        show: true,
        orient : 'vertical',
        x: 'right',
        y: 'top',
        feature : {
            saveAsImage : {show: true}
        }
    },
    dataRange: {
        min: 0,
        max: 100,
        x: 'left',
        y: 'bottom',
        splitNumber:3,
        color: ['#27922f','#f19138','#d24544'],
        formatter : function(v, v2){
            //console.log("v:"+v + " v2:"+v2);
            if (v2 < 35) { return '差'}      //value 100
            if (v2 > 35&&v2<70) { return '良'}      //value 100
            if (v2 > 70) { return '优'}      //value 100
        }
    },
    series : [
        {
            name: '测试',
            type: 'map',
            mapType: '内蒙古',
            itemStyle:{
                normal:{
                    label:{show:true},
                    borderColor:'#009dcd',
                    borderWidth:1,
                    areaStyle:{
                        color: '#ececec'
                    }
                },
                emphasis:{label:{show:true},color:'rgba(255,255,255,0.3)'}
            },
            tooltip:{
                show: false
            },
            data:[

            ],
            markLine: {
                smooth:true,
                effect : {
                    show: true,
                    scaleSize: 2,
                    period: 30,
                    color: '#fff',
                    shadowBlur: 3
                },
                itemStyle : {
                    normal: {
                        label:{show:false,textStyle:{color: '#c9c9c9'}},
                        borderWidth:1.2,
                        lineStyle: {
                            type: 'solid',
                            shadowBlur: 10
                        }
                    }
                }
            },
            geoCoord: res_nei_meng_gu_GEO
        }
    ]
};
var res_ptnMap_forward = $.extend(true, {}, ptnMap);
res_ptnMap_forward.series[0].markLine.data = (function(){
    var d = [];
    var myId =101;      //用于唯一标志
    for(var k in res_nei_meng_gu_GEO){
        var m = [];
        var x = {name:"呼和浩特市"};     //起点
        var y ={};      //终点
        var tip ='中心' +' > '+ k+
            '<br>A1:'+(Math.random()*100).toFixed(2)+"ms"+
            '<br>A2:'+(Math.random()*100).toFixed(2)+"%"+
            '<br>A3:'+(Math.random()*100).toFixed(2)+"ms";
        y = {
            name: k,
            value: (Math.random()*100).toFixed(2),
            tooltip: {
                name: '中心'+' > '+ k,
                trigger:'item',
                myId: 101,
                formatter: tip,
                show: true
            }
        };
        m.push(x);
        m.push(y);
        d.push(m);
        myId++;

    }

    //console.log(d);  //用于查看该数据格式
    return d;
})();
res_ptnMap_forward.title.text= "概况";
【热门文章】
【热门文章】