1 watch: {
2 //观察option的变化
3 config: {
4 handler(newVal, oldVal) {
5 if (this.chart) {
6 if (newVal) {
7 this.chart.setOption(newVal);
8 } else {
9 this.chart.setOption(oldVal);
10 }
11 } else {
12 this.init();
13
14 }
15 },
16 deep: true //对象内部属性的监听，关键。
17 }
18 },
完整的charts文件内容，我是自己写的公用组件，
1 <template>
2 <div class="pr chart">
3 <div ref="chart" class="chart-body"></div>
4 <slot></slot>
5 </div>
6 </template>
7
8 <script scoped>
9 export default {
10 props: {
11 config: {
12 type: Object,
13 default: () => ({})
14 },
15
16 onClick: {
17 type: Function,
18 default: () => {}
19 },
20 onDispatchAction: {
21 type: Object,
22 default: () => ({})
23 },
24 onMouseover: {
25 type: Function,
26 default: () => {}
27 }
28 },
29 watch: {
30 //观察option的变化
31 config: {
32 handler(newVal, oldVal) {
33 if (this.chart) {
34 if (newVal) {
35 this.chart.setOption(newVal);
36 } else {
37 this.chart.setOption(oldVal);
38 }
39 } else {
40 this.init();
41
42 }
43 },
44 deep: true //对象内部属性的监听，关键。
45 }
46 },
47 mounted() {
48 if (!this.$echarts) {
49 return;
50 }
51 //初始化echarts
52 let echartsWarp = this.$refs["chart"];
53 let chart = (this.chart = this.$echarts.init(echartsWarp));
54 chart.setOption(this.config);
55
56 //点击旋转扇形，切该扇形高亮，我用的是每次点击重新渲染图，
57 //这样可以每次计算扇形起点，达到旋转的视觉效果
58 chart.on("click", params => {
59 this.onClick(params);
60 chart.setOption(this.config);
61 });
62 //高亮设置
63 chart.dispatchAction(this.onDispatchAction)
64 // //初始化设置高亮
65 chart.dispatchAction({
66 type: 'highlight',
67 seriesIndex: 0,
68 dataIndex: 0
69 })
70 //取消鼠标进入自动高亮效果
71 chart.on("mouseover", params => {
72 this.onMouseover(params);
73 });
74 //屏幕大小改变时，图形大小自适应
75 window.addEventListener("resize", () => {
76 chart.resize();
77 });
78 },
79 };
80 </script>
81 <style scoped>
82 .chart {
83 height: 3.7rem;
84 width: 3.7rem;
85 margin: 0 auto;
86 }
87 .chart-body {
88 width: 100%;
89 height: 100%;
90 }
91 </style>
