|
|
@@ -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; |
|
|
|