1、引入echarts

安装echarts

npm install echarts -S

全局引入echarts

在 main.js 中：

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

按需引入echarts

// 引入基本模板
let echarts = require('echarts/lib/echarts')

// 引入柱状图组件
require('echarts/lib/chart/bar')

// 引入折线图组件
require('echarts/lib/chart/line')

// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

demo.vue

<template>
  <div class="demo">
    <div id="echarts" :style="{width: '300px', height: '300px'}"></div>
  </div>
</template>
<script>
export default {
  name: 'demo',
  data () {
    return {
    }
  },
  mounted () {
    var dom = document.getElementById('echarts')
    var myChart = this.echarts.init(dom)
    // 绘制图表
    myChart.setOption({
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330]
      }]
    })
  }
}
</script>

<style scoped>
</style>

2、引入vue-echarts

安装vue-echarts

npm install echarts vue-echarts

引入vue-echarts

main.js

import Vue from 'vue'
import ECharts from 'vue-echarts' //  引用webpack中的components / ECharts.vue  

//  手动导入ECharts模块以减小包的大小
import 'echarts/lib/chart/line'

//  如果您想使用ECharts扩展，只需导入扩展包即可
//  以ECharts-GL为例：
//  您只需要使用`npm install --save echarts-gl`安装该软件包，并按如下所示导入
import ' echarts-gl ' 

//  注册要使用的组件
Vue.component('chart', ECharts)

demo.vue

<template>
  <div class="demo">
    <chart ref="chart" :options="options" :autoresize="true"></chart>
  </div>
</template>
<script>
export default {
  name: 'demo',
  data () {
    return {
      options: {}
    }
  },
  mounted () {
    this.options = {
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }
  }
}
</script>

运行效果

demo.png

……

记录一下在vue项目开发中，对于echarts与vue-echarts的引用及应用