多个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);
}