Skip to content

Commit 36a7065

Browse files
PanJiaChenPanJiaChen
committed
change charts name
1 parent eee3079 commit 36a7065

File tree

6 files changed

+657
-3
lines changed

6 files changed

+657
-3
lines changed

‎src/components/Charts/Keyboard.vue

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<template>
2+
<div :id="id" :class="className" :style="{height:height,width:width}" />
3+
</template>
4+
5+
<script>
6+
import echarts from 'echarts'
7+
import resize from './mixins/resize'
8+
9+
export default {
10+
mixins: [resize],
11+
props: {
12+
className: {
13+
type: String,
14+
default: 'chart'
15+
},
16+
id: {
17+
type: String,
18+
default: 'chart'
19+
},
20+
width: {
21+
type: String,
22+
default: '200px'
23+
},
24+
height: {
25+
type: String,
26+
default: '200px'
27+
}
28+
},
29+
data() {
30+
return {
31+
chart: null
32+
}
33+
},
34+
mounted() {
35+
this.initChart()
36+
},
37+
beforeDestroy() {
38+
if (!this.chart) {
39+
return
40+
}
41+
this.chart.dispose()
42+
this.chart = null
43+
},
44+
methods: {
45+
initChart() {
46+
this.chart = echarts.init(document.getElementById(this.id))
47+
48+
const xAxisData = []
49+
const data = []
50+
const data2 = []
51+
for (let i = 0; i < 50; i++) {
52+
xAxisData.push(i)
53+
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
54+
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
55+
}
56+
this.chart.setOption(
57+
{
58+
backgroundColor: '#08263a',
59+
grid: {
60+
left: '5%',
61+
right: '5%'
62+
},
63+
xAxis: [{
64+
show: false,
65+
data: xAxisData
66+
}, {
67+
show: false,
68+
data: xAxisData
69+
}],
70+
visualMap: {
71+
show: false,
72+
min: 0,
73+
max: 50,
74+
dimension: 0,
75+
inRange: {
76+
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
77+
}
78+
},
79+
yAxis: {
80+
axisLine: {
81+
show: false
82+
},
83+
axisLabel: {
84+
textStyle: {
85+
color: '#4a657a'
86+
}
87+
},
88+
splitLine: {
89+
show: true,
90+
lineStyle: {
91+
color: '#08263f'
92+
}
93+
},
94+
axisTick: {
95+
show: false
96+
}
97+
},
98+
series: [{
99+
name: 'back',
100+
type: 'bar',
101+
data: data2,
102+
z: 1,
103+
itemStyle: {
104+
normal: {
105+
opacity: 0.4,
106+
barBorderRadius: 5,
107+
shadowBlur: 3,
108+
shadowColor: '#111'
109+
}
110+
}
111+
}, {
112+
name: 'Simulate Shadow',
113+
type: 'line',
114+
data,
115+
z: 2,
116+
showSymbol: false,
117+
animationDelay: 0,
118+
animationEasing: 'linear',
119+
animationDuration: 1200,
120+
lineStyle: {
121+
normal: {
122+
color: 'transparent'
123+
}
124+
},
125+
areaStyle: {
126+
normal: {
127+
color: '#08263a',
128+
shadowBlur: 50,
129+
shadowColor: '#000'
130+
}
131+
}
132+
}, {
133+
name: 'front',
134+
type: 'bar',
135+
data,
136+
xAxisIndex: 1,
137+
z: 3,
138+
itemStyle: {
139+
normal: {
140+
barBorderRadius: 5
141+
}
142+
}
143+
}],
144+
animationEasing: 'elasticOut',
145+
animationEasingUpdate: 'elasticOut',
146+
animationDelay(idx) {
147+
return idx * 20
148+
},
149+
animationDelayUpdate(idx) {
150+
return idx * 20
151+
}
152+
})
153+
}
154+
}
155+
}
156+
</script>

‎src/components/Charts/LineMarker.vue

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
<template>
2+
<div :id="id" :class="className" :style="{height:height,width:width}" />
3+
</template>
4+
5+
<script>
6+
import echarts from 'echarts'
7+
import resize from './mixins/resize'
8+
9+
export default {
10+
mixins: [resize],
11+
props: {
12+
className: {
13+
type: String,
14+
default: 'chart'
15+
},
16+
id: {
17+
type: String,
18+
default: 'chart'
19+
},
20+
width: {
21+
type: String,
22+
default: '200px'
23+
},
24+
height: {
25+
type: String,
26+
default: '200px'
27+
}
28+
},
29+
data() {
30+
return {
31+
chart: null
32+
}
33+
},
34+
mounted() {
35+
this.initChart()
36+
},
37+
beforeDestroy() {
38+
if (!this.chart) {
39+
return
40+
}
41+
this.chart.dispose()
42+
this.chart = null
43+
},
44+
methods: {
45+
initChart() {
46+
this.chart = echarts.init(document.getElementById(this.id))
47+
48+
this.chart.setOption({
49+
backgroundColor: '#394056',
50+
title: {
51+
top: 20,
52+
text: 'Requests',
53+
textStyle: {
54+
fontWeight: 'normal',
55+
fontSize: 16,
56+
color: '#F1F1F3'
57+
},
58+
left: '1%'
59+
},
60+
tooltip: {
61+
trigger: 'axis',
62+
axisPointer: {
63+
lineStyle: {
64+
color: '#57617B'
65+
}
66+
}
67+
},
68+
legend: {
69+
top: 20,
70+
icon: 'rect',
71+
itemWidth: 14,
72+
itemHeight: 5,
73+
itemGap: 13,
74+
data: ['CMCC', 'CTCC', 'CUCC'],
75+
right: '4%',
76+
textStyle: {
77+
fontSize: 12,
78+
color: '#F1F1F3'
79+
}
80+
},
81+
grid: {
82+
top: 100,
83+
left: '2%',
84+
right: '2%',
85+
bottom: '2%',
86+
containLabel: true
87+
},
88+
xAxis: [{
89+
type: 'category',
90+
boundaryGap: false,
91+
axisLine: {
92+
lineStyle: {
93+
color: '#57617B'
94+
}
95+
},
96+
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
97+
}],
98+
yAxis: [{
99+
type: 'value',
100+
name: '(%)',
101+
axisTick: {
102+
show: false
103+
},
104+
axisLine: {
105+
lineStyle: {
106+
color: '#57617B'
107+
}
108+
},
109+
axisLabel: {
110+
margin: 10,
111+
textStyle: {
112+
fontSize: 14
113+
}
114+
},
115+
splitLine: {
116+
lineStyle: {
117+
color: '#57617B'
118+
}
119+
}
120+
}],
121+
series: [{
122+
name: 'CMCC',
123+
type: 'line',
124+
smooth: true,
125+
symbol: 'circle',
126+
symbolSize: 5,
127+
showSymbol: false,
128+
lineStyle: {
129+
normal: {
130+
width: 1
131+
}
132+
},
133+
areaStyle: {
134+
normal: {
135+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
136+
offset: 0,
137+
color: 'rgba(137, 189, 27, 0.3)'
138+
}, {
139+
offset: 0.8,
140+
color: 'rgba(137, 189, 27, 0)'
141+
}], false),
142+
shadowColor: 'rgba(0, 0, 0, 0.1)',
143+
shadowBlur: 10
144+
}
145+
},
146+
itemStyle: {
147+
normal: {
148+
color: 'rgb(137,189,27)',
149+
borderColor: 'rgba(137,189,2,0.27)',
150+
borderWidth: 12
151+
152+
}
153+
},
154+
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
155+
}, {
156+
name: 'CTCC',
157+
type: 'line',
158+
smooth: true,
159+
symbol: 'circle',
160+
symbolSize: 5,
161+
showSymbol: false,
162+
lineStyle: {
163+
normal: {
164+
width: 1
165+
}
166+
},
167+
areaStyle: {
168+
normal: {
169+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
170+
offset: 0,
171+
color: 'rgba(0, 136, 212, 0.3)'
172+
}, {
173+
offset: 0.8,
174+
color: 'rgba(0, 136, 212, 0)'
175+
}], false),
176+
shadowColor: 'rgba(0, 0, 0, 0.1)',
177+
shadowBlur: 10
178+
}
179+
},
180+
itemStyle: {
181+
normal: {
182+
color: 'rgb(0,136,212)',
183+
borderColor: 'rgba(0,136,212,0.2)',
184+
borderWidth: 12
185+
186+
}
187+
},
188+
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
189+
}, {
190+
name: 'CUCC',
191+
type: 'line',
192+
smooth: true,
193+
symbol: 'circle',
194+
symbolSize: 5,
195+
showSymbol: false,
196+
lineStyle: {
197+
normal: {
198+
width: 1
199+
}
200+
},
201+
areaStyle: {
202+
normal: {
203+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
204+
offset: 0,
205+
color: 'rgba(219, 50, 51, 0.3)'
206+
}, {
207+
offset: 0.8,
208+
color: 'rgba(219, 50, 51, 0)'
209+
}], false),
210+
shadowColor: 'rgba(0, 0, 0, 0.1)',
211+
shadowBlur: 10
212+
}
213+
},
214+
itemStyle: {
215+
normal: {
216+
color: 'rgb(219,50,51)',
217+
borderColor: 'rgba(219,50,51,0.2)',
218+
borderWidth: 12
219+
}
220+
},
221+
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
222+
}]
223+
})
224+
}
225+
}
226+
}
227+
</script>

0 commit comments

Comments
 (0)