drawLine() {
var that = this;
window.addEventListener("resize", this.drawLine);
let myChart = this.$echarts.init(this.$refs.echarts);
var data = [600, 790, 900, 130, 600, 800, 800, 600, 790, 790, 600, 790, 790]
var data2 = []
data.forEach((type) => {
data2.push(type * 1.03)
});
var option = {
color: [
"rgba(0, 204, 255, 1)",
"rgba(39, 120, 255, 1)",
"rgba(72, 176, 255, 1)",
"rgba(91, 207, 255, 1)",
"rgba(108, 227, 255, 1)",
"rgba(119, 240, 240, 1)",
"rgba(129, 163, 243, 1)",
"rgba(243, 170, 104, 1)",
"rgba(245, 232, 140, 1)",
"rgba(162, 143, 218, 1)",
"rgba(162, 238, 250, 1)",
"rgba(38, 116, 255, 1)",
"rgba(73, 177, 255, 1)",
],
grid: {
left: "40",
right: "40",
top: "5%",
bottom: "15%",
containLabel: true,
},
tooltip: {
show: true,
},
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0, 1
],
bottom: '8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: "rgba(0, 204, 255, 0.9)",
},
textStyle: {
color: "#fff"
},
borderColor: "rgba(41, 83, 132, 0.9)"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
xAxis: [
{
data: [
"HW01",
"HW01",
"HW02",
"HW03",
"HW04",
"HW05",
"HW06",
"HW07",
"HW08",
"HW09",
"HW10",
"HW11",
"HW12",
],
axisLine: {
lineStyle: {
color: "rgba(88, 118, 143, 1)",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(150, 175, 220, 1)",
fontSize: FontChart(12),
},
},
{
data: [
"HW01",
"HW01",
"HW02",
"HW03",
"HW04",
"HW05",
"HW06",
"HW07",
"HW08",
"HW09",
"HW10",
"HW11",
"HW12",
],
axisLine: {
show: false,
lineStyle: {
color: "#3d5269",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitArea: {
show: false,
},
splitLine: {
show: false,
},
},
],
yAxis: [
{
nameTextStyle: {
color: "rgba(150, 175, 220, 1)",
fontSize: FontChart(13),
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(88, 118, 143, 1)",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 1)",
fontSize: FontChart(13),
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(88, 118, 143, 1)",
},
},
yAxisIndex: 0,
},
],
series: [
{
name: "设备统计",
type: "bar",
barWidth: 10,
zlevel: 2,
itemStyle: {
normal: {
color: new that.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0, 204, 255, 1)",
},
{
offset: 1,
color: "rgba(0, 204, 255, 0.1)",
},
],
false
),
},
},
label: {
normal: {
show: false,
fontSize: FontChart(18),
fontWeight: "bold",
color: "#ffffff",
position: "top",
},
},
data: data,
},
{
type: "bar",
barWidth: 16,
zlevel: 1,
xAxisIndex: 1,
itemStyle: {
normal: {
color: new that.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(24, 143, 180, 1)",
}, {
offset: 0.3,
color: "rgba(24, 143, 180, 0.2)",
},
{
offset: 1,
color: "rgba(24, 143, 180, 0.1)",
},
],
false
),
},
},
label: {
normal: {
show: false,
fontSize: 18,
fontWeight: "bold",
color: "#ffffff",
position: "top",
},
},
data: data2,
},
],
};
myChart.clear();
myChart.resize();
myChart.setOption(option);
},