1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<script setup>
const state=reactive({
chartData:{
legend:['本地', '异地'],
xAxis:['M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12'],
colors:[$c.aql4,$c.bll5,$c.ipl3,$c.cbl3,],
data:[
[ 230, 210,220,179,123, 120, 132, 101,168, 181, 134, 126, 134, 190, ],
[ 301, 334, 390, 330,300,240,235, 210, 187, 212, 278, 220, 320, 302,],
],
},
chartOption:{}
})
const processData=()=>{
let legend=state.chartData.legend,
colors=state.chartData.colors,
xAxis=state.chartData.xAxis,
data=state.chartData.data,
processedData=[]
legend.forEach((item,i)=>{
processedData.push({
name: legend[i],
type: 'line',
barWidth:15,
label: {
show: false,
position: 'insideRight'
},
itemStyle:{
color: colors[i],
borderRadius: 5
},
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: $c.fade(colors[i],.9)
}, {
offset: 0.8,
color: $c.fade(colors[i],.1)
}], false),
shadowcolor: $c.fade(colors[i],.3),
shadowBlur: 10
},
data: data[i]
})
})
state.chartOption.series=processedData;
state.chartOption.xAxis.data=xAxis;
state.chartOption.legend.data=legend;
}
const processOption=()=>{
state.chartOption={
update:false,
// title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show:true,
data: [],
top:"5",
right:10,
},
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: "15%",
containLabel: true
},
yAxis: {
type: 'value',
axisLabel: { align: 'right' }
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisLabel: { interval:0, align: 'center' }
},
series: []
}
processData()
}
onMounted(() => {
processOption();
})
</script>
<template>
<echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less">
</style>