vue + eCharts 实现图表展示

一、首先安装 eCharts 依赖

npm install echarts -S

二、main.js 引入 eCharts 依赖

　　2.1）在 main.js 中引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts 

　　2.2）HTML.vue

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

三、新建独立 js 文件引入 eCharts 

　　3.1）新建 myCharts.js 用于封装各种 eCharts

/**
 * 各种画echarts图表的方法都封装在这里
 */
//导入eCharts
import echarts from 'echarts'
const myCharts= function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $chart: {
      get() {
        return {
          line: function (id) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();

            const optionData = {
              title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x: 'left'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              lineStyle: {
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                  name: '邮件营销',
                  type: 'line',
                  stack: '总量',
                  data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                  name: '联盟广告',
                  type: 'line',
                  stack: '总量',
                  data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                  name: '视频广告',
                  type: 'line',
                  stack: '总量',
                  data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                  name: '直接访问',
                  type: 'line',
                  stack: '总量',
                  data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                  name: '搜索引擎',
                  type: 'line',
                  stack: '总量',
                  data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
              ]
            };

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

export default {
  myCharts
}

　　3.2）在 main.js 中引用

//引入eCharts
import myCharts from './views/charts/mycharts.js'
//路径看自己情况而定
Vue.use(myCharts)
//引入eCharts

　　3.3）在页面中使用

<template>
  <div id="chart">
    <div id="chart-line"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$chart.line("chart-line");
  }
};
</script>
<style scoped>
#chart{
  text-align: left;
}
#chart-line,#chart-bar,#chart-pie {
  width: 100%;
  height: 300px;
}
</style>

四、使用 vue-echarts  

　　这个没用过，听说能省不少事，就是不知道能不能支持所有的图表，以后有机会试一试