Vue项目配置ECharts的两种方法

原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

需求：

Vue项目用到ECharts，需要配置,除了直接在index.html里面引入echarts文件外，还实践总结了如下两种npm配置方法，亲测有效，建议用方法二。

方法一，注册echarts到vue的原型对象中，指定某个div作为echarts的画布：

1，npm安装

npm install echarts --save

2，main.js增加设置

// 引入echarts
import echarts from 'echarts'
// 将echarts注册到Vue组件的原型对象中去
Vue.prototype.$echarts = echarts

3，组件内使用

（1）创建charts文件夹，文件夹内创建index.vue文件

（2）在router文件夹的index.js文件内引入第一步建立的vue文件，并为其设置访问路径

//引入图表组件
import chart from '@/page/charts/index'

   {
   //为图表组件设置访问路径 
      path: '/chart',
      name: 'chart',
      component: chart
    } 

（3）在charts文件夹，index.vue里面加入如下代码

<template>
    <div class="line" id="line" :style="{width: '300px', height: '300px'}"></div>
</template>

<script>
export default{
  mounted(){
      // 调用方法绘制图表
      this.drawLine();
  },
  methods:{
      drawLine(){
          // 为charts选定父容器并初始化charts画布
          let myChart = this.$echarts.init(document.getElementById('line'));
          // 为图表添加数据
          myChart.setOption({
              xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: 'line'
              }]
          })                
      }
  },
}
</script>

4，验证

npm run dev 跑起来项目，在地址栏路径后加入/chart访问

备注：此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
demo的github地址：https://github.com/tom-wong666/model.git

方法二，注册echarts画布为vue的一个自定义组件(或者称为控件/标签)：

1，npm安装

npm i vue-echarts --save

2，main.js增加设置，注意引入配置的方式，可以直接b配置引入所有配置，也可以单独引入需要的配置，比如案例中只演示了bar，就只引入了bar

// 引入ECharts
import ECharts from 'vue-echarts/components/ECharts'
// 注册ECharts为标签
Vue.component('chart', ECharts)
// a配置：按需引入echart图表配置，同下b配置
import '../node_modules/echarts/lib/chart/bar'
// import '../node_modules/echarts/lib/chart/line'
// import '../node_modules/echarts/lib/chart/pie'
// import '../node_modules/echarts/lib/chart/tooltip'
// b配置：直接引入所有echart配置,同上a配置
// require('echarts')

3，组件内使用

（1）创建charts文件夹，文件夹内创建index.vue文件

（2）在router文件夹的index.js文件内引入第一步建立的vue文件，并为其设置访问路径

//引入图表组件
import chart from '@/page/charts/index'

   {
   //为图表组件设置访问路径 
      path: '/chart',
      name: 'chart',
      component: chart
    } 

（3）在charts文件夹，index.vue里面加入如下代码

<template>
  <div>
    <!--chart标签就是画布元素，设置chart的宽和高可以改变画布大小-->
    <!--options绑定的数据实际配置项，对应echarts实例中的option后面的对象-->
    <chart :options='bar' :style="{width: '300px', height: '300px'}"></chart>
  </div>

</template>

<script>
  export default{
    data(){
        return {
          bar:{
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:[10, 52, 200, 334, 390, 330, 220]
                }
            ]
          } 
        }
    },
  }
</script>  

4，验证

npm run dev 跑起来项目，在地址栏路径后加入/chart访问

备注：此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
demo的github地址：https://github.com/tom-wong666/xiaoa.git