update line chart
This commit is contained in:
lb
vanhempi
405672842a
commit
c9c920fdb5
17787
package-lock.json
generated
Normal file
17787
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -8,6 +8,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.2",
|
||||
"normalize.css": "^8.0.1",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.1",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="line-chart__wrapper">
|
||||
<div class="line-chart__custom-legend flex">
|
||||
<span>产线1 - 产线5</span>
|
||||
<ul style="margin-left: 8px; padding-left: 8px;" class="flex">
|
||||
<ul style="margin-left: 8px; padding-left: 8px" class="flex">
|
||||
<li>产线1</li>
|
||||
<li>产线2</li>
|
||||
<li>产线3</li>
|
||||
@ -11,11 +11,34 @@
|
||||
<li>产线5</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="line-chart"></div>
|
||||
<div id="line-chart" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts/core";
|
||||
import { LineChart } from "echarts/charts";
|
||||
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
} from "echarts/components";
|
||||
|
||||
import { LabelLayout, UniversalTransition } from "echarts/features";
|
||||
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
|
||||
echarts.use([
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LineChart,
|
||||
LabelLayout,
|
||||
UniversalTransition,
|
||||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
export default {
|
||||
name: "LineChart",
|
||||
props: {
|
||||
@ -28,6 +51,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
colors: [
|
||||
"#18c7f3",
|
||||
"#FFD160",
|
||||
@ -41,11 +65,132 @@ export default {
|
||||
"#19f",
|
||||
"#98f",
|
||||
],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.chart)
|
||||
this.chart = echarts.init(document.getElementById("line-chart"));
|
||||
this.chart.setOption({
|
||||
// title: {
|
||||
// text: "ECharts 入门示例",
|
||||
// },
|
||||
grid: {
|
||||
top: 32,
|
||||
left: 32,
|
||||
bottom: 24,
|
||||
right: 12,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#eee3",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: Array(31)
|
||||
.fill(1)
|
||||
.map((_, index) => index + 1),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
fontSize: 6,
|
||||
lineHeight: 1,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位/m³",
|
||||
nameTextStyle: {
|
||||
color: "#fff9",
|
||||
fontSize: 6,
|
||||
// lineHeight: 6,
|
||||
// height: 6,
|
||||
// padding: 0,
|
||||
align: "right",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff9",
|
||||
fontSize: 6,
|
||||
lineHeight: 1,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
// data: [100, 200, 300, 400, 500],
|
||||
},
|
||||
color: this.colors,
|
||||
series: Array(5)
|
||||
.fill(1)
|
||||
.map((_, index) => ({
|
||||
name: Math.random(),
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 3,
|
||||
lineStyle: {
|
||||
width: "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] + "44" },
|
||||
{ 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;
|
||||
}),
|
||||
})),
|
||||
});
|
||||
},
|
||||
initData() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -81,16 +226,47 @@ li {
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -7px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
top: 2px;
|
||||
left: -6px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 1px;
|
||||
background: #eee6;
|
||||
}
|
||||
|
||||
li:nth-child(1)::before {
|
||||
background: #18c7f3;
|
||||
}
|
||||
li:nth-child(2)::before {
|
||||
background: #f31868;
|
||||
}
|
||||
li:nth-child(3)::before {
|
||||
background: #30e89a;
|
||||
}
|
||||
li:nth-child(4)::before {
|
||||
background: #2760ff;
|
||||
}
|
||||
li:nth-child(5)::before {
|
||||
background: #ee3fff;
|
||||
}
|
||||
li:nth-child(6)::before {
|
||||
background: #2f0fff;
|
||||
}
|
||||
li:nth-child(7)::before {
|
||||
background: #800f77;
|
||||
}
|
||||
li:nth-child(8)::before {
|
||||
background: #f77;
|
||||
}
|
||||
li:nth-child(9)::before {
|
||||
background: #19f;
|
||||
}
|
||||
li:nth-child(10)::before {
|
||||
background: #98f;
|
||||
}
|
||||
|
||||
ul {
|
||||
flex: 1;
|
||||
width: 144px;
|
||||
|
||||
Ladataan…
Viittaa uudesa ongelmassa
Block a user