多個echarts 設置的graphic相互影響

使用echarts構建了多個圖形，並且能在同一個div中相互切換，其中一個餅狀圖設置了graphic，其他的沒有設置，結果發現設置的echarts的graphic在其他圖形上頁顯示了

如圖所示

 

實際上柱狀圖是沒有設置type爲text的graphic的，被餅狀圖影響到了。

解決方案：

myChart.setOption(option,true);

實例化時把第二個參數設置爲true,第二個參數是notMerge，設置爲true意思是不合並，即不和前面的第一個餅狀圖合併，也就不會被餅狀圖的graphic影響。

代碼如下

//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);
    }