版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LzzMandy/article/details/84143575
实现效果：
1、实际值和预测值在连接点，只显示实际值
2、当预测值>计划值时，出现红色柱子，同时tooltip显示预测值、计划值和超计划值（超计划值=预测-计划）
3、当预测值<=计划值时，不出现红色柱子，同时tooltip显示预测值、计划值和超计划值=0
/*
实际值和预测值在连接点，只显示实际值
当预测值>计划值时，出现红色柱子，同时tooltip显示预测值、计划值和超计划值（超计划值=预测-计划）
当预测值<=计划值时，不出现红色柱子，同时tooltip显示预测值、计划值和超计划值=0
*/
var xData = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; // 横坐标
var planData = [0, 7, 4, 7, 4, 7, 9, 7, 4, 7]; // 计划值
var actualData = [0, 8, 5, 8, 5, '-', '-', '-', '-', '-']; // 实际值,最后一个数字和预计值同下表值相同，这样实际和预测才能显示成平滑的曲线，不断开
var predictData = ['-', '-', '-', '-', 5, 8, 9, 9, 6, 5]; // 预计值
var minDataDownStackBar = []; // 最小值{预测和计划做比较，谁小显示谁}
var differenceDataUpStackBar = []; // 差值=预测-计划,有负数
var seriesData = []; //辅助数组，存储series数据
// 求最小值和差值
for (var i = 0; i < planData.length; i++) {
if (actualData[i] != '-') { //实际值不为-时，最小值和差值均显示成-，这样堆积的柱子，在虚线出现之前都不显示出来
minDataDownStackBar[i] = '-';
differenceDataUpStackBar[i] = '-';
} else { //实际值为-时，预测和计划谁小显示谁
differenceDataUpStackBar[i] = predictData[i] - planData[i];
if (predictData[i] <= planData[i]) { //预计值<=计划值，minDataDownStackBar取预计值，differenceDataUpStackBar作差
minDataDownStackBar[i] = predictData[i];
} else { //预计值>计划值，minDataDownStackBar取预计值，differenceDataUpStackBar作差
minDataDownStackBar[i] = planData[i];
}
}
}
seriesData = [actualData, planData, predictData, minDataDownStackBar, differenceDataUpStackBar];
// 系列值、系列颜色、渐变色、图例名称
var colorsData = ["#33D663", "#3487C8", "#48c871", "#48c871", "#48c871"]; // 线颜色
var offsetcolors = ['rgba(51,214,99,1)', 'rgba(51,214,99,0.2)', 'rgba(52,135,200,1)', 'rgba(52,135,200,.2)']; // 渐变色设置
var legenseriesParamsDataata = ["实际", "计划", "预测", "差值", "差值"]; // 图例，堆积也用此数组
var seriesParamsData = []; //辅助数组，用来存放series对象
for (var i = 0; i < seriesData.length; i++) {
var strType;
if (i < 3) {
strType = 'line';
} else {
strType = 'bar';
}
var item = {
name: legenseriesParamsDataata[i],
type: strType,
stack: legenseriesParamsDataata[i],
smooth: true,
symbolSize: 1,
itemStyle: { // 拐点值
normal: {
color: colorsData[i], // 取实线的颜色
}
},
data: seriesData[i],
};
if (i === 0) {
item.areaStyle = { // 实际值-------加渐变色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: offsetcolors[0]
}, {
offset: 1,
color: offsetcolors[1]
}])
},
};
} else if (i === 1) {
item.areaStyle = { // 计划值---------加渐变色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: offsetcolors[2]
}, {
offset: 1,
color: offsetcolors[3]
}])
},
};
} else if (i === 2) { // 预测值------------加虚线
item.lineStyle = {
normal: {
width: 2,
color: colorsData[i], // 取虚线的颜色
type: 'dashed'
}
};
} else if (i === 3) { // 最小值----------设置下面堆积柱子的颜色和值
item.zlevel = -1;
var downData = []; //辅助数组，用来存储下方堆积柱子的颜色和值
for (var j = 0; j < seriesData[4].length; j++) {
if (seriesData[4][j] === "-" || seriesData[4][j] <= 0) { //根据最后差值判断是否显示堆积柱子的下部分
downData[j] = {
value: seriesData[3][j],
itemStyle: {
normal: {
color: "rgba(250,84,84,.0)" //透明
}
}
};
} else { // 差值>0，超计划，显示成红色
downData[j] = {
value: seriesData[3][j],
itemStyle: {
normal: {
color: "rgba(250,84,84,1)"
}
}
};
}
}
item.data = downData;
// item.itemStyle.normal.color = '#fa5454';// 最小值的颜色，堆积
item.barWidth = 20;
} else if (i === 4) { // 差值
item.barWidth = 20;
var upData = []; //辅助数组，用来存储上方堆积柱子的颜色和值
for (var j = 0; j < seriesData[4].length; j++) {
if (seriesData[4][j] === "-" || seriesData[4][j] <= 0) { // 差值-||<=0，则超值为0
upData[j] = {
value: 0
};
} else { // 差值>0，超计划，显示成红色
upData[j] = {
value: seriesData[4][j],
itemStyle: {
normal: {
color: "rgba(250,84,84,1)" //超计划显示的颜色
},
}
};
}
}
item.data = upData;
}
seriesParamsData.push(item);
}
var option = {
backgroundColor: '#8B4513',
color: colorsData,
legend: { //图例
show: true,
data: [{
name: legenseriesParamsDataata[1],
textStyle: {
color: '#fff'
},
// icon:'image:///images/echarts/backplan.png'
},
{
name: legenseriesParamsDataata[0],
textStyle: {
color: '#fff'
},
// icon:'image:///images/echarts/backactual.png'
},
{
name: legenseriesParamsDataata[2],
textStyle: {
color: '#fff'
},
// icon:'image:///images/echarts/backpredict.png'
}
],
right: 20,
top: 10,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#ffa147',
width: 2,
type: 'dashed'
}
},
formatter: function(params) {
// debugger;
var paraActual = null; //实际
var paraPredict = null; //预测
var paraPlan = null; //计划
var paraExceedPlan = null; //超计划
for (var i = 0, len = params.length; i < len; i++) {
if (params[i].seriesName.indexOf("实际") > -1) {
paraActual = params[i];
} else if (params[i].seriesName.indexOf("计划") > -1) {
paraPlan = params[i];
} else if (params[i].seriesName.indexOf("预测") > -1) {
paraPredict = params[i];
} else if (params[i].seriesName.indexOf("差值") > -1) {
paraExceedPlan = params[i];
}
}
var str = "";
//有计划显示计划
if (paraPlan) {
str += paraPlan.marker + paraPlan.seriesName + ' : ' + paraPlan.value + '<br/>';
}
//有实际显示实际
if (paraActual && (paraActual.value === 0 || !!paraActual.value) && paraActual.value != '-') {
str += paraActual.marker + paraActual.seriesName + ' : ' + paraActual.value + '<br/>';
} //没有实际判断是否有预测，显示预测
else if (paraPredict && (paraPredict.value === 0 || !!paraPredict.value) && paraPredict.value != '-') {
str += paraPredict.marker + paraPredict.seriesName + ' : ' + paraPredict.value + '<br/>';
//有差值显示差值
if (paraExceedPlan && (paraExceedPlan.value === 0 || !!paraExceedPlan.value) && paraExceedPlan.value != '-') {
str += paraExceedPlan.marker + '超计划 : ' + paraExceedPlan.value + '<br/>';
}
}
// //有差值显示差值
// if (paraExceedPlan && !!paraExceedPlan.value && paraExceedPlan.value != '-') {
// str += paraExceedPlan.marker + '超计划 : ' + paraExceedPlan.value + '<br/>';
// }
return "时间：" + params[0].name + ":00<br>" + str;
}
},
calculable: false,
grid: {
top: '10%',
left: '10%',
right: '10%',
bottom: '10%',
containLabel: true,
},
xAxis: [{
name: "h",
nameLocation: 'end',
type: 'category',
data: xData,
nameTextStyle: {
color: '#fff',
fontSize: 12,
}, //坐标轴名称的文字样式。
boundaryGap: false,
axisLine: {
show: false
}, //轴线颜色
axisTick: {
show: false
}, //标记长度
splitLine: {
show: true,
lineStyle: {
color: "rgba(52,135,200,.4)",
width: 1,
type: "solid"
}
}, //分割线
axisLabel: {
show: true,
margin: 10,
textStyle: {
color: function(value) { // x轴文字颜色的设定
return value > 14 ? 'gray' : 'white'; //横坐标预警值
},
}
},
}],
yAxis: [{
name: '人',
type: 'value',
nameTextStyle: {
color: '#fff'
}, //坐标轴名称的文字样式。
axisLine: {
show: false
}, //轴线颜色
axisTick: {
show: false
}, //标记长度
axisLabel: {
show: true,
color: '#fff'
}, //文字
splitLine: {
show: true,
lineStyle: {
color: 'rgba(52,135,200,.4)',
width: 1,
type: "solid"
}
}, //分割线
}],
series: []
};
option.series = seriesParamsData;