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
111
112
113
114
115
| //公共水球图组件
| <template>
| <div class="echart-box" :id="elementId"></div>
| </template>
| <script>
| import { fontSize } from "@/utils/fontSize.js"
|
| export default {
| data () {
| return {
| elementId: ''
| }
| },
|
| props: {
| params: {
| type: Object
| }
| },
|
| created () {
| this.elementId = this.uuid()
| },
|
| mounted () {
| this.$nextTick(() => {
| this.initEcharts()
| })
| },
|
| methods: {
| uuid () {
| return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
| var r = Math.random() * 16 | 0,
| v = c == 'x' ? r : (r & 0x3 | 0x8)
| return v.toString(16)
| })
| },
|
| initEcharts () {
| const that = this
| const myChart = that.$echarts.init(document.getElementById(that.elementId))
|
| const colorList = ['#2391FF ', '#5AD8A6', '#6DC8EC']
|
| const option = {
| title: {
| text: '总库容',
| subtext: '3312',
| textStyle: {
| fontSize: 12,
| color: '#fff',
| },
| subtextStyle: {
| fontSize: 12,
| color: '#47A2FF'
| },
| textAlign: 'center',
| x: '45%',
| y: '36%',
| },
| tooltip: {
| trigger: "item",
| backgroundColor: '#fff',
| axisPointer: {
| type: "shadow",
| label: {
| show: false
| }
| },
| textStyle: {
| color: '#000',
| fontStyle: 'normal',
| fontFamily: '微软雅黑',
| fontSize: 12,
| }
| },
|
| color: colorList,
| series: [
| {
| name: '姓名',
| type: 'pie',
| radius: [40, 50],
| label: {
| show: false
| },
| labelLine: {
| show: false
| },
| itemStyle: {
| borderWidth: 3,
| borderColor: '#fff'
| },
| data: [
| { name: '公益型水库', value: 100 },
| { name: '电站型水库', value: 100 },
| { name: '其他水库', value: 100 }
| ],
| }
| ]
| }
|
|
| myChart.setOption(option)
| }
| }
| }
| </script>
| <style lang="scss" scoped>
| .echart-box {
| width: 120px;
| height: 120px;
| }
| </style>
|
|
