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  

//  手動導(dǎo)入ECharts模塊以減小包的大小
import 'echarts/lib/chart/line'

//  如果您想使用ECharts擴(kuò)展萎攒，只需導(dǎo)入擴(kuò)展包即可
//  以ECharts-GL為例：
//  您只需要使用`npm install --save echarts-gl`安裝該軟件包遇八，并按如下所示導(dǎo)入
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>

運(yùn)行效果

demo.png

……

記錄一下在vue項目開發(fā)中，對于echarts與vue-echarts的引用及應(yīng)用