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
| <template>
| <div :id="uuid" style="width: 100%;height:100%;"></div>
| </template>
|
| <script>
| import {getDataJson, pollingRefresh} from "@/utils/refreshCptData";
|
| export default {
| name: "cpt-chart-pie",
| props:{
| width:Number,
| height:Number,
| option:Object
| },
| data(){
| return {
| uuid:'',
| chartOption:{},
| chart:undefined,
| cptData:[]
| }
| },
| watch:{
| 'option.attribute':{
| handler(newObj) {
| this.loadChart(newObj);
| },
| deep: true//深度监听
| },
| width(){
| this.chart.resize();
| },
| height(){
| this.chart.resize();
| }
| },
| created() {
| this.uuid = require('uuid').v1();
| },
| mounted() {
| this.chart = this.$echarts.init(document.getElementById(this.uuid));
| this.refreshCptData();
| },
| methods:{
| refreshCptData(){
| pollingRefresh(this.uuid, this.option.cptDataForm, this.loadData)
| },
| loadData(){
| getDataJson(this.option.cptDataForm).then(res => {
| this.cptData = res;
| this.loadChart(this.option.attribute);
| });
| },
| loadChart(attribute){
| const that = this;
| that.chartOption = {
| color: attribute.pieColor,
| title: {
| text: attribute.chartTitle,
| subtext: attribute.subtext,
| left: attribute.titleX,
| top:attribute.titleY,
| textStyle: { fontSize: attribute.titleFontSize, color: attribute.titleTextColor },
| // 副标题文本样式设置
| subtextStyle: { fontSize: 12, color: attribute.subtextColor }
| },
| tooltip: {
| trigger: 'item'
| },
| legend: {
| show: attribute.legendShow,
| orient: attribute.orient,
| x: attribute.legendX,
| y: attribute.legendY,
| textStyle:{
| color: attribute.legendTextColor,
| fontSize: attribute.legendFontSize
| }
| },
| series: [
| {
| name: attribute.chartTitle,
| type: 'pie',
| roseType: attribute.roseType==='false' ? false:attribute.roseType,
| radius: [attribute.radiusInside+'%',attribute.radiusOutside+'%'],
| label: {
| position: attribute.labelPosition,
| fontSize: attribute.labelFontSize,
| color: attribute.labelColor
| },
| itemStyle: {
| borderRadius: attribute.borderRadius
| },
| data: this.cptData,
| emphasis: {
| itemStyle: {
| shadowBlur: 10,
| shadowOffsetX: 0,
| shadowColor: 'rgb(126,201,217)'
| }
| }
| }
| ]
| };
| that.chart.setOption(that.chartOption);
| }
| }
| }
| </script>
|
| <style scoped>
|
| </style>
|
|
