echart在vue的简单使用，封装

1.3 echart的使用

1.3.1 组件内使用

1. 导入echarts模块

   import echarts from 'echarts'
   

2. 准备图表渲染容器div

     <div id="main" style="width: 600px;height:400px;">div>
   

3. 初始化图表

   {
       mounted() {
           //dom渲染后，进行图标初始化
           // 基于准备好的dom，初始化echarts实例
           this.drawMap()
       },
       drawMap() {
         var myChart = echarts.init(document.getElementById('main'))
         var option = {...}
         myChart.setOption(option)
   	}
   }
   

4. 完整代码如下：

1.3.2 全局注入

在main.js导入echarts模块，然后给Vue的原型绑定echarts属性，这样每个子组件都可以使用了。

main.js

import Vue from 'vue'
import App from './App.vue'
import echarts from 'echarts'
Vue.prototype.echarts=echarts
new Vue({
    render:h=>h(App)
}).$mount('#app')

Map.vue中 直接通过this 使用 this.echarts.init(document.getElementById('main'))

1.3.3 封装vue插件

• 步骤如下：

  • 创建一个echartsPlugin.js文件作为地图插件

  • 创建一个install方法，如果Vue.use(插件名)，默认执行install方法

  • 给Vue.prototype添加$myCharts属性，使用defineProperty，可以避免属性被修改

  • $myCharts属性返回的是一个对象，line方法封装了项目中使用的折线图的配置，参数id是元素的id属性

  • 最后暴露出install方法

• 使用如下：

  1. echartsPlugin.js：

     import echarts from 'echarts'
     //封装echart图表常用配置
     const install = function (Vue) {
         Object.defineProperty(Vue.prototype, '$myCharts', {
             get() {
                 return {
                     line(id) {
                         var myChart = echarts.init(document.getElementById(id))
     
                         // 指定图表的配置项和数据
                         var option = {
                             title: {
                                 text: 'ECharts 入门示例',
                                 show: false
                             },
                             tooltip: { //提示悬浮框设置
                                trigger:'axis'
                             },
                             legend: {
                                 data: ['销量', '金额'],
                             },
                             xAxis: {
                                 data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                             },
                             yAxis: {},
                             series: [
                                 {
                                     name: '销量',
                                     type: 'line', //图表类型
                                     data: [5, 20, 36, 10, 10, 20],
                                 },
                             ],
                         }
                         // 使用刚指定的配置项和数据显示图表。
                         myChart.setOption(option)
                     }
                 }
             }
         })
     }
     export default install
     

  2. main.js中启用此插件

     import echartsPlugin from './plugins/echartsPlugin'
     Vue.use(echartsPlugin)
     

  3. Map.vue中直接使用此方法即可 this.$myCharts.line('main')