echarts中graphic_多个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 + "

", 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 += '

' + 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);

}