多个echarts 设置的graphic相互影响

使用echarts构建了多个图形,而且能在同一个div中相互切换,其中一个饼状图设置了graphic,其余的没有设置,结果发现设置的echarts的graphic在其余图形上页显示了css

如图所示echarts

 

实际上柱状图是没有设置type为text的graphic的,被饼状图影响到了。dom

解决方案:this

myChart.setOption(option,true);code

实例化时把第二个参数设置为true,第二个参数是notMerge,设置为true意思是不合并,即不和前面的第一个饼状图合并,也就不会被饼状图的graphic影响。orm

代码以下blog

//echarts柱状堆叠图
    function showBarchart1(id,n,data,xname,e) {
        var width =$(".chartDiv").width();
        $("#"+id).css({"width":width,"height":"400px"});
        //基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));
        // 指定图表的配置项和数据
        //完成
        var data1=data.hasCompletedData;
        //未完成
        var data2=data.unCompletedData;
        //总计
        var option = {
            color:["#15C7BD","#337ab7","#f99265"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    },
                    label: {
                        show:false,
                        formatter: function (params) {
                            if (params.seriesData.length === 0) {
                                // 就是这里,能够获取到我想要的那个数据
                                if (params.seriesData.length === 0) {
                                    window.mouseCurValue = params.value;
                                }
                            }
                        }
                    }
                },
                formatter: function (params, ticket, callback) {
                    var res = params[0].axisValue  + "<br/>", sum = 0;
                    console.log(params);
                    for (var i = 0; i < params.length; i++) {
                        var series = params[i];
                        sum += Number(series.data);
                        if (sum >= window.mouseCurValue) {
                            res += '<br/>' + params[i].seriesName + ' : ' + params[i].data;//鼠标悬浮显示的字符串内容
                            break;
                        }
                    }
                    return res;
                }
            },
            grid: {
                left: '10%',
                bottom:'35%'
            },
            legend: {
                data:n,//['未完成','完成']
                x : 'center',
                y : 'bottom'
            },
            xAxis: {
                type: 'category',
                name:xname,
                nameTextStyle:{
                    padding: [35, 0, 5, 0],
                },
                data:data.category ,//["1月","2月","3月"]
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel:{
                    interval: 0,
                    rotate: 60,
                    formatter: function (value) {
                        return (value.length > 8 ? ("..."+value.slice(value.length-8,value.length)) : value )
                    }
                }
            },
            yAxis: {
                type : 'value'
            },
            series: [{
                name:n[0],//完成,
                type:'bar',
                barMaxWidth:50,//最大宽度
                stack:'sum',
                itemStyle:{
                    normal:{
                        color:'#15c7bd'
                    }
                },
                data:data1
            },
                {
                    name:n[1],//未完成
                    type:'bar',
                    stack:'sum',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: function(params) {
                                return Number(params.value) + Number(data1[params.dataIndex]);
                            },
                            textStyle: { color: '#000' }
                        }
                    },
                    itemStyle:{
                        normal:{
                            color:'#999999'
                        }
                    },
                    data:data2
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        // 实例化时设置setOption的第二参数(notMerge)为true
        myChart.setOption(option,true); 
        if(e){
            myChart.on('click', function (params) {
                e.call(this,params);
            });
        }
    }
    //饼图
    function showBarchart4(id,data) {
        var width =$(".chartDiv").width();
        $("#"+id).css({"width":width,"height":"400px"});
        var myChart = echarts.init(document.getElementById(id));
        option = {
            color:["#15C7BD","#aaa","#f99265"],
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                x: 'center',
                y:'bottom',
                data: ["已完成","未完成"]
            },
            graphic:{
                type:"text",
                left:"center",
                top: 'middle',
                z:0,
                zlevel:0,
                style:{
                    fontSize: '18',
                    text:[
                        '工单总数',
                        data[0].t_value
                    ].join('\n'),
                    textAlign:'center'
                }
            },
            series : [
                {
                    // name: '姓名',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: '50%',
                    data: data,
                    label: {
                        show: true,
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        formatter: "{b} , {d}%"
                    },

                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option, true);
    }