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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
| <template>
| <div id="myBarChart" :class="className" :style="{height:height,width:width}" />
| </template>
|
| <script>
| import echarts from 'echarts'
| // require('echarts/theme/macarons') // echarts theme
| // import resize from './mixins/resize'
|
| // const animationDuration = 6000
|
| export default {
| // mixins: [resize],
| props: {
| datas: {
| type: Array,
| default: () => []
| },
| datas1: {
| type: Array,
| default: () => []
| },
| className: {
| type: String,
| default: 'chart'
| },
| width: {
| type: String,
| default: '100%'
| },
| height: {
| type: String,
| default: '300px'
| }
| },
| data() {
| return {
| chart: null
| }
| },
| watch: {
| datas(n) {
|
| this.initChart()
| },
| datas1(n) {
|
| this.initChart()
| }
| },
| mounted() {
| this.$nextTick(() => {
| this.initChart()
| })
| },
| beforeDestroy() {
| if (!this.chart) {
| return
| }
| this.chart.dispose()
| this.chart = null
| },
| methods: {
| initChart() {
| const chartDom = document.getElementById('myBarChart')
| const myChart = echarts.init(chartDom)
| this.chart = myChart
|
| this.chart.setOption({
| title: {
| text: '城市优良天统计饼图',
| show: false
| },
| tooltip: {
| trigger: 'item',
| backgroundColor: 'rgba(255,255,255,.8)', // 通过设置rgba调节背景颜色与透明度
| color: 'gray',
| borderWidth: '1',
| borderColor: '#d9d9d9',
| formatter: function(val) {
| // console.log(val)
| const name = val.name
| // const pollution = val.seriesName.split(':')[0]
| // const proportion = val.seriesName.split(':')[1]
| return name + '<br/>' + val.seriesName + ': ' + val.value + '天' + '<br/>' + '占比:' + val.data.data0
| },
| textStyle: {
| color: '#808080'
| }
| },
| legend: {
| x: 'center',
| y: 'bottom',
| padding: [10, 0, 0, 0],
| formatter: function(name) {
| return name.split(':')[0]
| }
| },
| toolbox: {
| feature: {
| saveAsImage: {}
| }
| },
| color: ['#00e400', '#ffff00', '#ff7e00', '#ff0000', '#99004c', '#7e0023'],
| grid: {
| top: 10,
| left: '2%',
| right: '2%',
| bottom: '3%',
| containLabel: true
| },
| xAxis: [{
| type: 'category',
| data: this.datas1,
| axisTick: {
| alignWithLabel: true
| }
| }],
| yAxis: [{
| type: 'value',
| axisTick: {
| show: false
| }
| }],
| series: this.datas
| }, true)
| }
| }
| }
| </script>
|
|
