Vue 配置 echarts

ECharts，一个使用 JavaScript 实现的开源可视化库。提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

vue中使用echarts

• 安装：yarn add echarts
• 封装：myCharts.js
• 引入：main.js
• 使用

// myCharts.js
/**
 * @Author: brady
 * @Date: 2019/8/30
 * @Last Created time: 16:05:23
 * @Description: 各种画echarts图表的方法都封装在这里
 */
import echarts from 'echarts'

const install = Vue => {
  Object.defineProperties(Vue.prototype, {
    $chart: {
      get () {
        return {
          basePie: id => {
            this.chart = echarts.init(document.getElementById(id))
            this.chart.clear()

            const optionData = {
              series : [
                {
                  name: '访问来源',
                  type: 'pie',
                  radius: '55%',
                  data:[
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                  ]
                }
              ]
            }

            this.chart.setOption(optionData)
          },
        }
      }
    }
  })
}

export default {
  install
}

// main.js

// import echarts from 'echarts' 			// 全局引入echarts
import echarts from './assets/js/myCharts'  // 单独封装echarts

// Vue.prototype.$echarts = echarts

Vue.use(echarts)

<!-- Demo -->
<template>
  <div id="demo">
    <!-- echarts应用 -->
    <div id="echart"></div>
  </div>
</template>

<script>
  export default {
    name: 'Demo',
    data() {
      return {}
    },
    mounted() {
      this.$chart.basePie('echart')
    },
  }
</script>

<style scoped>
  #echart {
  	padding: 30px;
    width: 300px;
    height: 300px;
  }
</style>