PieChart.vue
2.76 KB
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
101
102
103
104
105
106
107
108
109
110
<template>
<div id="vehicle-loading-chart" />
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
}
},
mounted() {
this.vehicleLoading()
},
methods: {
vehicleLoading() {
const myChart = echarts.init(
document.getElementById('vehicle-loading-chart')
)
const option = {
title: {
left: 'center'
},
tooltip: {
trigger: 'item',
// formatter: (value) => {
// '{a} <br/>{b} : {c} ({d}%)'
// }
// <span style="color:red;">.</span>可添加样式
formatter: '{b} : {c}<br/>({d}%)'
},
legend: {
show: false,
bottom: 0,
itemWidth: 2,
itemHeight: 8,
data: ['空载车', '半载车', '满载车']
},
series: [
{
name: '半径模式',
type: 'pie',
radius: [30, 90],
center: ['46%', '50%'],
roseType: 'radius',
label: {
fontSize: 14,
color: '#262335'
},
emphasis: {
label: {
show: true
}
},
data: [
{ value: 335, name: '空载车' },
{ value: 310, name: '半载车' },
{ value: 234, name: '满载车' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
color: function(params) {
var colorList = [
{
c1: ' #fce5ca', // 管理
c2: 'red'
},
{
c1: ' #508DFF', // 实践
c2: '#26C5FE'
},
{
c1: '#63E587', // 操作
c2: '#5FE2E4'
}]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
offset: 0,
color: colorList[params.dataIndex].c1
}, {
offset: 1,
color: colorList[params.dataIndex].c2
}])
}
}
}
}
]
}
myChart.setOption(option)
window.addEventListener('resize', function() {
myChart.resize()
})
}
}
}
</script>
<style lang="scss" scoped>
#vehicle-loading-chart {
width: 100%;
height: 100%;
// height: 300px;
// margin: 0 auto;
}
</style>