使用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); }