pieChart.vue
3.03 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<template>
<view class="piechart">
<div :id='bindId' class="chart"></div>
</view>
</template>
<script>
export default {
data () {
return {
}
},
mounted() {
},
watch:{
bindId:function(newValue,oldValue){
},
chartData:{
handler(newValue,oldValue){
this.drawPie();
},
deep:true
},
},
props:{
bindId:{
type:String,
default:''
},
chartData: {
type: Object,
default: function(){
return {}
}
}
},
methods: {
drawPie() {
let myChart = {};
let chartDom = document.getElementById(this.bindId);
myChart = this.echarts.init(chartDom);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
var itemDatas = [];
var option=this.chartData;
if(!option.series) return;
for(let i = 0, len = option.series.length;i < len; i++) {
itemDatas = option.series[i].data;
}
let legendData = [];
for(let i = 0, len = itemDatas.length;i < len; i++) {
legendData.push({
name: itemDatas[i].name,
icon: 'rect'
});
}
var opt = {
title:{
show:true,
text:this.chartData.title,
left: uni.upx2px(18.11),
top: uni.upx2px(10.86),
textStyle: {
fontWeight: "normal",
fontSize: uni.upx2px(25.4),
color: '#4A4A4A'
}
},
legend: {
orient: 'horizontal',
right: 'center',
itemWidth: uni.upx2px(19.92),
itemHeight: uni.upx2px(19.92),
bottom: uni.upx2px(18.11),
left: 'center',
data: legendData
},
series: [{
type: 'pie',
color: ['#6e6fc1', '#33bafe', '#fec62b', '#ff9c01', '#38d4be', '#79ce4c'],
center: ['50%', '50%'],
radius: ['20%', '60%'],
label: {
normal: {
show: true,
position: 'outside',
formatter: '{b} {d}%'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true
}
},
data: itemDatas
}]
};
// myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(opt);
}
}
}
</script>
<style>
.chart{
width:706.52upx;
height:438.4upx;
margin: 0 auto;
background: #FFFFFF;
margin-bottom: 18.2upx;
border-radius:7.24upx;
overflow: hidden;
}
</style>