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
| <template>
| <div class="pie-echart">
| <div class="echart" :style="style"></div>
| </div>
| </template>
| <script>
| import $ from 'jquery'
| import echarts from "echarts"
| import {getMaxFromArr, getMinFromArr} from "../libs/common"
| export default{
| props: {
| width: {
| type: String,
| default: 'auto'
| },
| height: {
| type: String,
| default: '100px'
| },
| colors: {
| type: Array,
| default() {
| return [];
| }
| }
| },
| data() {
| return {
| graph: '',
| style: {
| width: this.width,
| height: this.height,
| },
| option: {},
| }
| },
| methods: {
| setOption: function(opt) {
| var colors = this.colors;
| var defaults = {
| title: {
| text: '',
| x:'left',
| textStyle: {
| color: "#FFFFFF"
| },
| },
|
| tooltip: {
| trigger: 'item',
| formatter: "{a} <br/>{b} : {c} ({d}%)"
| },
| color: function() {
| var sys_color = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
| // 遍历插入颜色
| for(var i = colors.length-1; i >-1; i--) {
| var color = colors[i];
| sys_color.splice(0, 0, color);
| }
| return sys_color;
| }(),
| series: [
| {
| name: '',
| type: 'pie',
| radius : '70%',
| center: ['50%', '60%'],
| data:[],
| itemStyle: {
| emphasis: {
| shadowBlur: 10,
| shadowOffsetX: 0,
| shadowColor: 'rgba(0, 0, 0, 0.5)'
| }
| }
| }
| ]
| };
| // 合并配置项
| this.option = $.extend(true, {}, defaults, opt);
| // console.log(this.option);
| // 生成饼状图
| this.graph.setOption(this.option);
| this.graph.resize();
| },
| resize: function() {
| var option = this.graph.getOption();
| this.setOption(option);
| },
| },
| mounted: function() {
| // console.log(this.$el);
| var $root = $(this.$el);
| var graphEl = $root.find('.echart').get(0);
| this.graph = echarts.init(graphEl);
| this.setOption({});
| },
| }
| </script>
|
|
