-
产线1 - 产线5
+
+
+
- - 产线1
- - 产线2
- - 产线3
- - 产线4
- - 产线5
+ - {{ v }}
+
+ 无数据
+
@@ -56,6 +70,14 @@ export default {
title: { text: "default chart" },
}),
},
+ legend: {
+ type: Array,
+ default: () => [],
+ },
+ series: {
+ type: Object,
+ default: () => ({}),
+ },
},
data() {
return {
@@ -66,7 +88,7 @@ export default {
"#F31868",
"#30E89A",
"#2760FF",
- "#2f0fff",
+ "#723fff",
"#ee3fff",
"#800f77",
"#f77",
@@ -84,30 +106,18 @@ export default {
if (!this.chart)
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({
- // title: {
- // text: "ECharts 入门示例",
- // },
grid: {
top: adjust(32),
left: adjust(32),
bottom: adjust(24),
right: adjust(12),
},
- // tooltip: {
- // trigger: "axis",
- // axisPointer: {
- // lineStyle: {
- // color: "#eee3",
- // },
- // },
- // },
xAxis: {
- data: Array(31)
+ data: Array(24)
.fill(1)
.map((_, index) => index + 1),
axisLine: {
lineStyle: {
- // width: 1,
color: "#5982b2a0",
},
},
@@ -118,6 +128,7 @@ export default {
color: "#ffffff",
fontSize: adjust(6),
lineHeight: adjust(1),
+ margin: adjust(8),
},
},
yAxis: {
@@ -126,9 +137,6 @@ export default {
nameTextStyle: {
color: "#fff9",
fontSize: adjust(6),
- // lineHeight: 6,
- // height: 6,
- // padding: 0,
align: "right",
},
axisLine: {
@@ -154,10 +162,34 @@ export default {
// data: [100, 200, 300, 400, 500],
},
color: this.colors,
- series: Array(5)
+ // series: Array(5)
+ // .fill(1)
+ // .map((_, index) => ({
+ // name: Math.random(),
+ // type: "line",
+ // symbol: "circle",
+ // symbolSize: adjust(3),
+ // lineStyle: {
+ // width: adjust(1),
+ // },
+ // areaStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: this.colors[index] + "33" },
+ // { offset: 1, color: "transparent" },
+ // ]),
+ // },
+ // data: Array(31)
+ // .fill(1)
+ // .map(() => {
+ // let v = Math.floor(Math.random() * 5000);
+ // while (v < 3000) v = Math.floor(Math.random() * 5000);
+ // return v;
+ // }),
+ // })),
+ series: Array(this.legend)
.fill(1)
- .map((_, index) => ({
- name: Math.random(),
+ .map((lgd, index) => ({
+ name: lgd,
type: "line",
symbol: "circle",
symbolSize: adjust(3),
@@ -165,35 +197,12 @@ export default {
width: adjust(1),
},
areaStyle: {
- // color: {
- // type: "linear",
- // x: 0,
- // y: 0,
- // x2: 0,
- // y2: 1,
- // colorStops: [
- // {
- // offset: 0,
- // color: this.colors[index]+'66',
- // },
- // // { offset: 0.3, color: this.colors[index]+'aa' },
- // // { offset: 0.35, color: this.colors[index]+'77' },
- // // { offset: 1, color: this.colors[index]+'00' },
- // { offset: .5, color: 'transparent' },
- // ],
- // },
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.colors[index] + "33" },
{ offset: 1, color: "transparent" },
]),
},
- data: Array(31)
- .fill(1)
- .map(() => {
- let v = Math.floor(Math.random() * 5000);
- while (v < 3000) v = Math.floor(Math.random() * 5000);
- return v;
- }),
+ data: this.series[this.legend],
})),
});
},
@@ -253,30 +262,33 @@ li:nth-child(1)::before {
background: #18c7f3;
}
li:nth-child(2)::before {
- background: #f31868;
+ background: #ffd160;
}
li:nth-child(3)::before {
- background: #30e89a;
+ background: #f31868;
}
li:nth-child(4)::before {
- background: #2760ff;
+ background: #30e89a;
}
li:nth-child(5)::before {
- background: #ee3fff;
+ background: #2760ff;
}
li:nth-child(6)::before {
- background: #2f0fff;
+ background: #723fff;
}
li:nth-child(7)::before {
- background: #800f77;
+ background: #ee3fff;
}
li:nth-child(8)::before {
- background: #f77;
+ background: #800f77;
}
li:nth-child(9)::before {
- background: #19f;
+ background: #f77;
}
li:nth-child(10)::before {
+ background: #19f;
+}
+li:nth-child(11)::before {
background: #98f;
}
diff --git a/src/components/icons/clockSvg.vue b/src/components/icons/clockSvg.vue
index 577ce4e..bf4a6cf 100644
--- a/src/components/icons/clockSvg.vue
+++ b/src/components/icons/clockSvg.vue
@@ -1,7 +1,7 @@
+
+
diff --git a/src/components/icons/fireSvg.vue b/src/components/icons/fireSvg.vue
index 7f35084..a4f9542 100644
--- a/src/components/icons/fireSvg.vue
+++ b/src/components/icons/fireSvg.vue
@@ -1,7 +1,7 @@
+
+
diff --git a/src/components/icons/sandSvg.vue b/src/components/icons/sandSvg.vue
index 952c77a..f2218a4 100644
--- a/src/components/icons/sandSvg.vue
+++ b/src/components/icons/sandSvg.vue
@@ -1,7 +1,7 @@
+
+
diff --git a/src/components/icons/switchSvg.vue b/src/components/icons/switchSvg.vue
index c26e6cd..0a21367 100644
--- a/src/components/icons/switchSvg.vue
+++ b/src/components/icons/switchSvg.vue
@@ -1,7 +1,7 @@
+
+
diff --git a/src/components/icons/tempSvg.vue b/src/components/icons/tempSvg.vue
index c4eac1a..903bf58 100644
--- a/src/components/icons/tempSvg.vue
+++ b/src/components/icons/tempSvg.vue
@@ -1,7 +1,7 @@
+
diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue
index a769e77..a0ca4c7 100644
--- a/src/components/layout/Main.vue
+++ b/src/components/layout/Main.vue
@@ -47,7 +47,7 @@