Echarts和Vuejs

Echarts官方推出vue-echarts用于Echarts在vuejs使用。

• 安装
• 使用
  • 减少打包bundle大小(使用vue-cli的项目)

安装

$ npm install vue-echarts

使用

推荐使用vue-loader结合ES模块方式引入

import Vue from 'vue'
import ECharts from 'vue-echarts/components/ECharts'

// import ECharts modules manually to reduce bundle size
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

// register component to use
Vue.component('chart', ECharts)

减少打包bundle大小(使用vue-cli的项目)

因为echarts体积比较大，为了减少打包尺寸，可以使用按需引入的方式，修改代码如下即可

build/webpack.base.conf.js

      {
        test: /\.js$/,
        loader: 'babel-loader',
-       include: [resolve('src'), resolve('test')]
+       include: [
+         resolve('src'),
+         resolve('test'),
+         resolve('node_modules/vue-echarts'),
+         resolve('node_modules/resize-detector')
+       ]
      }