Echart 多图同一Div 渲染重叠的问题，实验下来，最有效的一个方法就是这个，在初始化之前，加一句 removeAttr。。, 其他方法如.clear, .dispose， .setOption({},true) 均失败。。。
$("#mid_right_chart").removeAttr("_echarts_instance_").empty(); // remove 之前生成的层
var main_chart = echarts.init(document.getElementById('mid_right_chart')); //初始化
function pu_stp_chart() {
$("#mid_right_chart").removeAttr("_echarts_instance_").empty()
var main_chart = echarts.init(document.getElementById('mid_right_chart'));
main_chart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var br_pu_vol = [];
var br_plan_pu_pkg = [];
var br_pu_stp = [];
var br_plan_pu_stp = [];
var br_pu_pps = [];
var br_pu_pln_pps = [];
var x_data = [];
var x_type = $("#chart_type").val()
var year_num = $("#year_num").val()
$.ajax({
type: "POST",
url: "json/main_json.php",
contentType: "application/x-www-form-urlencoded", // 如果是post必须定义
dataType: "json",
json: "callback",
data: {
action: "q_pu_pps",
type: x_type,
year_num: year_num
},
success: function (result) {
if (result) {
for (var i = 0; i < result.length; i++) {
x_data.push(result[i].x_data);
}
for (var i = 0; i < result.length; i++) {
br_pu_vol.push(result[i].br_pu_vol);
}
for (var i = 0; i < result.length; i++) {
br_plan_pu_pkg.push(result[i].br_plan_pu_pkg);
}
for (var i = 0; i < result.length; i++) {
br_pu_stp.push(result[i].br_pu_stp);
}
for (var i = 0; i < result.length; i++) {
br_plan_pu_stp.push(result[i].br_plan_pu_stp);
}
for (var i = 0; i < result.length; i++) {
br_pu_pps.push(result[i].br_pu_pps);
}
for (var i = 0; i < result.length; i++) {
br_pu_pln_pps.push(result[i].br_pu_pln_pps);
}
main_chart.hideLoading(); //隐藏加载动画
main_chart.setOption({
title: {
text: 'Brown Pickup Stop'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: false },
label: { show: true }
}
},
tooltip: {},
legend: {
data: ['Pickup Stp', 'Pickup Pcs', 'Pickup PPS']
},
xAxis: {
data: x_data
},
yAxis: [
{
splitNumber: 5,
},
{
splitNumber: 5,
},
{
splitNumber: 5,
axisLabel: { show: false }
}
],
series: [
{
name: 'Pickup Stp',
type: 'line',
yAxisIndex: 0,
label: {
show: true,
position: 'left',
formatter: function (p) {
return formatNum(p.value)
}
},
lineStyle: {
normal: {
color: '#8B4513'
}
},
data: br_pu_stp
},
{
name: 'Pickup Stp',
type: 'line',
yAxisIndex: 0,
label: {
show: true,
position: 'left',
formatter: function (p) {
return formatNum(p.value)
}
},
lineStyle: {
normal: {
type: 'dotted',
color: '#8B4513'
}
},
data: br_plan_pu_stp
},
{
name: 'Pickup Pcs',
type: 'line',
yAxisIndex: 1,
label: {
show: true,
position: 'right',
formatter: function (p) {
return formatNum(p.value)
}
},
lineStyle: {
normal: {
color: '#87CEFA'
}
},
data: br_pu_vol
},
{
name: 'Pickup Pcs',
type: 'line',
yAxisIndex: 1,
label: {
show: true,
position: 'right',
formatter: function (p) {
return formatNum(p.value)
}
},
lineStyle: {
normal: {
type: 'dotted',
color: '#87CEFA'
}
},
data: br_plan_pu_pkg
},
{
name: 'Pickup PPS',
type: 'bar',
yAxisIndex: 2,
label: {
show: true,
position: 'top',
formatter: function (p) {
return formatNum(p.value)
}
},
itemStyle: {
normal: {
color: '#9ACD32'
}
},
data: br_pu_pps
},
{
name: 'Pickup PPS',
type: 'bar',
yAxisIndex: 2,
label: {
show: true,
position: 'top',
formatter: function (p) {
return formatNum(p.value)
}
},
itemStyle: {
normal: {
color: '#2E8B57'
}
},
data: br_pu_pln_pps
}
]
});
}
},
error: function (errorMsg) {
alert("Request fail");
main_chart.hideLoading();
}
})
}