Vue 封装 echarts，自定义组件，类似angular中的ngx-echarts


之前使用的angular8 框架，其中的ngx-echarts使用起来颇为方便，如今在使用vue的时候发现，并没有找到类似的组件，v-echarts用起来虽说也还可以，但是配置参数却是与echarts有所差异，习惯了用echarts的配置，用v-echarts倒是有点麻烦，随着echarts5版本的上线，v-echarts还停留在4版本上面，也是比较麻烦，于是便自己造了个轮子，原汁原味的保留里echarts的配置，熟悉echarts配置的小伙伴，也是可以直接上手使用的了，闲话不多说，下面不如正题

1、首先安装echarts，element-resize-detector，这个两个

1
2
3
npm install echarts --save // 可以直接下载最新本

npm install element-resize-detector --save  // vue中用来监听div的宽高变化

2、引入echarts

全局引入， 在man.js 文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue';

import App from './App.vue';

import * as echarts from 'echarts';

// 自定义组件--封装好的echarts

import scyEcharts from './components/scyecharts.vue'; // 全局引入自定组件

Vue.prototype.$echarts = echarts; // 引入echarts

Vue.component('scy-echarts', scyEcharts)

new Vue({

  el: '#app',

  router,

  render: h => h(App)

});

3、在components文件夹中创建新文件：scyecharts.vue

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
<template>

  <div class="echarts" :style="{ width: width ? width : '100%', height: height ? height : '100%' }" ref="echarts"></div>

</template>

<script>

import elementResizeDetectorMaker from "element-resize-detector";

export default {

  name: "scyEcharts", // 组件名

  props: ["width", "height", "options"],

  data() {

    return {

      myChart: "", // 声明一个变量接收echarts

    };

  },

  mounted() {

    this.drawChart();

    // 检测 div 宽度的变化

    const erd = elementResizeDetectorMaker();

    // eslint-disable-next-line no-unused-vars

    erd.listenTo(this.$refs.echarts, (element) => {

      this.$nextTick(() => {

        //监听到事件后执行的业务逻辑

        this.myChart.resize();

      });

    });

  },

  methods: {

    // 基于准备好的dom，初始化echarts实例

    drawChart() {

      this.myChart = this.$echarts.init(this.$refs.echarts);

    },

  },

  watch: {

    options: {

      handler() {

        this.myChart.setOption(this.options, true);

      },

    },

  },

};

</script>

<style scoped>

.echarts {

  overflow: hidden;

}

</style>

这个地方的watch，是用来监听数据的变化，以便用于实时更新echarts图表

4、引入自定义组件

在第二步中，我们已经在全局中引入好了自定义的组件，如果你想要在单独的页面引入，直接在需要的页面做单独的引入就可以了，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>

import scyEcharts from './components/scyecharts.vue'; // 这个路径是要根据你自己创建的文件的位置进行引入

export default {

component:{

'scy-echarts': 'scyEcharts'

}

}

5、使用自定义组件

创建新的文件diyecharts.vue，这里我们使用的是全局引入的方式

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<template>

  <div class="content-echars">

    <scy-echarts class="fl" width="30%" height="200px" :options="option"></scy-echarts>

  </div>

</template>

<script>

export default {

  data() {

    return {

      option: "",

    };

  },

  mounted() {
    // 填入单数和总数，并赋值
    this.option = this.pieOption({ single: 12, count: 50 });

  },

  methods: {

    // 空心圆--单个数据的展示

    pieOption(data) {

      var option = {

        series: [

          {

            type: "pie",

            clockwise: true,

            radius: [35, 45],

            center: ["50%", "50%"],

            label: {

              show: false,

            },

            labelLine: {

              show: false,

            },

            itemStyle: {

              shadowBlur: 0,

              shadowColor: "#203665",

            },

            data: [

              {

                value: data.single,

                label: {

                  rich: {

                    a: {

                      color: "#FFFFFF",

                      fontSize: 16,

                    },

                  },

                  formatter: function (params) {

                    return "{a|" + params.percent + "%}";

                  },

                  position: "center",

                  show: true,

                  fontSize: "14",

                  fontWeight: "normal",

                  color: "#333",

                },

                itemStyle: {

                  color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [

                    {

                      offset: 0,

                      color: "#41ABB8",

                    },

                    {

                      offset: 1,

                      color: "#51F267",

                    },

                  ]),

                  shadowBlur: 0,

                },

              },

              {

                value: data.count - data.single,

                name: "invisible",

                itemStyle: {

                  color: "rgba(28, 36, 44, .6)",

                },

                emphasis: {

                  itemStyle: {

                    color: "rgba(28, 36, 44, .6)",

                  },

                },

              },

            ],

          },

        ],

      };

      return option;

    },

  },

};

</script>

<style scoped>

.content-echars {

  width: calc(100vw);

  overflow: hidden;

}

</style>