371 lines
7.6 KiB
Vue
371 lines
7.6 KiB
Vue
<template>
|
|
<!-- line chart -->
|
|
<div class="line-chart__wrapper">
|
|
<div class="line-chart__custom-legend flex" v-if="legend.length">
|
|
<!-- <span>产线1 - 产线5</span> -->
|
|
<ul style="" class="flex">
|
|
<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
|
|
</ul>
|
|
</div>
|
|
<div :id="id" style="width: 100%; height: 100%"></div>
|
|
<div
|
|
v-show="legend.length === 0"
|
|
style="
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: #eee0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 24px;
|
|
color: #eee8;
|
|
user-select: none;
|
|
"
|
|
>
|
|
无数据
|
|
</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,
|
|
]);
|
|
|
|
function adjust(v) {
|
|
return v * 2;
|
|
}
|
|
|
|
export default {
|
|
name: "LineChart",
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: "line-chart",
|
|
},
|
|
config: {
|
|
type: Object,
|
|
default: () => ({
|
|
title: { text: "default chart" },
|
|
}),
|
|
},
|
|
unit: {
|
|
type: "String",
|
|
default: "单位/m³",
|
|
},
|
|
legend: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
series: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
colors: [
|
|
"#18c7f3",
|
|
"#FFD160",
|
|
"#F31868",
|
|
"#30E89A",
|
|
"#2760FF",
|
|
"#7138FF",
|
|
"#F318D8",
|
|
"#C0F318",
|
|
"#f77",
|
|
"#19f",
|
|
"#98f",
|
|
],
|
|
data: [],
|
|
legendtext: [
|
|
"asdfsadf",
|
|
"asdfsadf",
|
|
"asdfsadf",
|
|
"asdfsadf",
|
|
"asdfsadf",
|
|
"asdfsadf",
|
|
"asdfsadf",
|
|
"asdfsadf",
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
watch: {
|
|
series: {
|
|
deep: true,
|
|
handler: function () {
|
|
console.log("LineChart: series changed!");
|
|
this.init();
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
updateXAxis() {
|
|
const hour = +new Date().getHours();
|
|
return Array(24)
|
|
.fill(1)
|
|
.map((_, index) => {
|
|
if (hour - index < 0) {
|
|
return 24 + hour - index + ":00";
|
|
}
|
|
return hour - index + ":00";
|
|
})
|
|
.reverse();
|
|
},
|
|
init() {
|
|
if (!this.chart)
|
|
this.chart = echarts.init(document.getElementById(this.id));
|
|
this.chart.setOption({
|
|
grid: {
|
|
top: adjust(32),
|
|
left: adjust(32),
|
|
bottom: adjust(24),
|
|
right: adjust(12),
|
|
},
|
|
xAxis: {
|
|
data: this.updateXAxis(),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#5982b2a0",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#fff9",
|
|
fontSize: adjust(8),
|
|
lineHeight: adjust(1),
|
|
margin: adjust(8),
|
|
rotate: 30,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
name: this.unit,
|
|
nameTextStyle: {
|
|
color: "#fff9",
|
|
fontSize: adjust(9),
|
|
align: "",
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
// width: 1,
|
|
color: "#5982b2a0",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#fff9",
|
|
fontSize: adjust(8),
|
|
lineHeight: adjust(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: 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.length)
|
|
.fill(1)
|
|
.map((_, index) => {
|
|
let lgd = this.legend[index];
|
|
// console.log("series: ", lgd, index, this.series[lgd]);
|
|
return {
|
|
name: lgd,
|
|
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: this.series[lgd],
|
|
};
|
|
}),
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../assets/styles/functions";
|
|
|
|
::-webkit-scrollbar {
|
|
// display: none;
|
|
height: adjust(2px);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
height: adjust(2px);
|
|
border-radius: adjust(2px);
|
|
background: #ccc3;
|
|
}
|
|
|
|
// ::-webkit-scrollbar-track {
|
|
// height: adjust(1px);
|
|
// background: blue;
|
|
// }
|
|
|
|
ul,
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
min-width: adjust(20px);
|
|
}
|
|
|
|
ul {
|
|
// padding: 0 adjust(8px);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
height: adjust(28px);
|
|
// background: #eeec;
|
|
overflow-x: hidden;
|
|
white-space: pre-wrap;
|
|
padding-bottom: adjust(2px);
|
|
}
|
|
|
|
li {
|
|
text-align: right;
|
|
position: relative;
|
|
min-width: 40px;
|
|
margin-right: adjust(9px);
|
|
padding: 0 adjust(2px);
|
|
}
|
|
|
|
li:not(:last-child) {
|
|
// margin-right: adjust(16px);
|
|
}
|
|
|
|
.line-chart__custom-legend {
|
|
position: absolute;
|
|
top: adjust(-32px);
|
|
right: 0;
|
|
font-size: adjust(9px);
|
|
font-family: Ubuntu, sans-serif;
|
|
padding: 0;
|
|
// max-width: 100%;
|
|
width: 65%;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
li::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: adjust(2px);
|
|
left: adjust(-8px);
|
|
width: adjust(8px);
|
|
height: adjust(8px);
|
|
border-radius: adjust(1px);
|
|
background: #eee6;
|
|
}
|
|
|
|
li:nth-child(1)::before {
|
|
background: #18c7f3;
|
|
}
|
|
li:nth-child(2)::before {
|
|
background: #ffd160;
|
|
}
|
|
li:nth-child(3)::before {
|
|
background: #f31868;
|
|
}
|
|
li:nth-child(4)::before {
|
|
background: #30e89a;
|
|
}
|
|
li:nth-child(5)::before {
|
|
background: #2760ff;
|
|
}
|
|
li:nth-child(6)::before {
|
|
background: #7138FF;
|
|
}
|
|
li:nth-child(7)::before {
|
|
background: #F318D8;
|
|
}
|
|
li:nth-child(8)::before {
|
|
background: #C0F318;
|
|
}
|
|
li:nth-child(9)::before {
|
|
background: #f77;
|
|
}
|
|
li:nth-child(10)::before {
|
|
background: #19f;
|
|
}
|
|
li:nth-child(11)::before {
|
|
background: #98f;
|
|
}
|
|
|
|
.line-chart__wrapper {
|
|
position: relative;
|
|
background: #7771;
|
|
border-radius: adjust(3px);
|
|
backdrop-filter: blur(adjust(2px));
|
|
box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
|
|
height: 100%;
|
|
width: adjust(1px);
|
|
}
|
|
</style>
|