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
| <template>
| <div class="e-chart-root">
| <div class="e-chart-container">
| <div class="e-chart" :id="id" :ref="id"></div>
| </div>
| </div>
| </template>
|
| <script>
| // 引入 ECharts 主模块
| import ECharts from "echarts/lib/echarts";
| //引入折线图
| import "echarts/lib/chart/pie";
| //引入提示框
| import "echarts/lib/component/tooltip";
| //引入标题
| import "echarts/lib/component/title";
| //引入图例标志
| import "echarts/lib/component/legend";
| //区域缩放
| import "echarts/lib/component/dataZoom";
|
| // 引入自定义主题
| import "./theme/transparent"
|
| export default {
| props: {
| id: {
| type: String,
| required: true,
| }
| },
| methods:{
| setOption(opt) {
| // 整体配置项
| let option = {
| animation: false,
| color: this.getColor(opt),
| title: this.getTitle(opt),
| tooltip: {
| trigger: 'item',
| confine: true,
| formatter: '{a} <br/>{b} : {c} ({d}%)'
| },
| legend: {
| show: false,
| },
| series: this.getSeries(opt)
| };
| // 设置配置项
| this.$G.chartManage.get(this.id).setOption(option);
| },
| getColor(opt) { // 配置自定义颜色
| // 未配置自定义颜色
| if(!opt || !opt.color) {
| return []
| }
|
| return opt.color;
| },
| getTitle(opt) { // 配置标题
| // 未配置标题
| if(!opt || !opt.title) {
| return {
| show: false,
| };
| }
|
| // 返回标题
| return opt.title;
| },
| getSeries(opt) { // 设置series
| // 未配置series
| if(!opt || !opt.series) {
| return [];
| }
|
| // 设置配置项
| let series = opt.series.map(item=>{
| item.type='pie';
| item.radius = "55%";
| item.center = ['50%', '60%'];
| return item;
| });
| return series;
| }
| },
| mounted() {
| // 基于准备好的dom，初始化echarts实例
| let chart = ECharts.init(this.$refs[this.id], 'transparent');
| // 将图表添加到图表管理
| this.$G.chartManage.set(this.id, chart);
| // 设置配置项
| this.setOption({
| title: {
| text: '数据初始化',
| },
| series:[{
| name: '初始化',
| data:[
| {value: 0, name: '初始化数据'}
| ]
| }]
| });
| }
| }
| </script>
|
| <style scoped>
| .e-chart-root,
| .e-chart-container,
| .e-chart {
| height: 100%;
| box-sizing: border-box;
| }
| </style>
|
|
