// 数据项
powerUse: {
realTime: [1, 2, 4, 6],
history: [9, 9, 3, 4],
dataX: ['2时', '4时', '6时']
}
drawChart2() {
let myChartContainer4 = document.getElementById("chartContainer2");
if (myChartContainer4) {
this.echart2 = this.$echart.init(myChartContainer4);
let e2Data = this.powerUse;
// e2Data.dataX = this.get24Hour();
let points = [];// 描点路径(转换数据)
let hightLine = [];
if (e2Data.realTime.length) {
e2Data.realTime.forEach(function (value, index) {
points.push([index, value]);
});
hightLine = [{ coords: points }];
} else {
hightLine = [];
}
this.echart2.setOption({
tooltip: {
trigger: "axis",
},
legend: {
data: [
{
name: "实时负荷",
icon: "line"
},
{
name: "历史均值",
icon: "rect"
}
],
itemHeight: 8,
itemWidth: 15,
top: 0,
right: "2%",
textStyle: {
color: "#1E3765"
}
},
grid: {
left: "3%",
right: "3%",
bottom: 5,
top: 30,
containLabel: true
},
toolbox: {
show: false
},
xAxis: {
type: "category",
// boundaryGap: true, //X轴不从零开始
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#2C89AD" //轴线的颜色
}
},
axisLabel: {
color: "#1E3765"
},
data: e2Data.dataX,
},
yAxis: {
name: "单位/kW·h",
nameGap: 10,
nameTextStyle: {
color: "#4473A4",
padding: [3, 4, 5, 20]
},
type: "value",
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: ["#2C89AD"], //网格线的颜色
type: "dashed",
width: 0.5
}
},
axisLine: {
show: "true",
lineStyle: {
color: "#00A8DD" //Y轴的颜色
}
},
axisLabel: {
color: "#4473A4"
}
},
series: [
{
name: "历史均值",
type: "bar",
barWidth: 15,
itemStyle: {
color: new this.$echart.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: "#4BDDBB" },
{ offset: 1, color: "#3DA4FF" }
], false
),
barBorderRadius: [0, 0, 5, 5],
label: {
show: false,
position: "top"
}
},
data: e2Data.history
},
{
name: "历史均值",// top
type: "pictorialBar",
tooltip: { show: false },
symbolSize: [15, 10],
symbolOffset: [0, -5],
symbolPosition: "end",
color: "#4BDDBB",
z: 12,
data: e2Data.history
},
{
name: "实时负荷",
type: "line",
z: 14,
areaStyle: {
color: new this.$echart.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: "rgba(255,155,0, 0.3)" },
{ offset: 1, color: "rgba(255,155,0, 0)" }
], false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 5
},
itemStyle: {
color: "rgb(255,155,0)",
borderColor: "rgba(255,155,0,0.2)",
borderWidth: 6
},
data: e2Data.realTime
},
{
coordinateSystem: "cartesian2d",
name: "实时负荷",
type: "lines",
zlevel: 2,
polyline: true,
effect: {
show: true,
period: 15,
trailLength: 0.5, // 线的小尾巴
symbolSize: 5,
color: "#fff",
loop: true
},
lineStyle: {
width: 0.01
},
silent: true,
data: hightLine
}
]
});
}
},