在vue脚手架里如何使用echarts

<h2>第一步：肯定是把插件引入进去</h2>

npm install echarts -S

如果上面的引入报错，可以使用淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org  
cnpm install echarts -S

<h2>第二步 ： 可以全局引入，或者是按需引入</h2>

<h3>全局引入</h3>
<h4>在main.js里</h4>

// 引入echarts
import echarts from 'echarts'
//一般都要加个$加到vue的原型链上，方便引用
Vue.prototype.$echarts = echarts 

<h4>新建一个chart.vue组件</h4>

<template>
 <div>
     <div id="chart" class="chart">

     </div>
 </div>
</template>

<script>
  export default {
      data(){
          return{}
      },
      mounted(){
          this.myChart = 
              this.$echarts.init(document.getElementById("chart"));
          this.drawChart();
      },
      methods:{
          drawChart(){
             let option = {
                  xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [120, 200, 150, 80, 70, 110, 130],
                      type: 'bar'
                  }]
              };

             this.myChart.setOption(option);
                window.onresize = function(){
                       this.myChart.resize()
                  }
         
          }
      }
  }
</script>

上面是个柱状图的demo，缺点：全局引入会将所有的echarts图表打包，导致体积过大，如果echarts图用的比较少，可以考虑按需引入

<h3>按需引入</h3>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
//引入右上角下载图片等等一系列的toolbox的功能
require('echarts/lib/component/title/toolbox')
  export default {
  //里面代码同上
}
</script>

这里之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全。

图表适应屏幕

  $(window).resize(function() {
          chart.resize()
        })