Vue使用echarts图表

1.安装

$ npm install echarts vue-echarts

2.在main.js中引用

import Vue from 'vue'
import ECharts from 'vue-echarts'
// 引入折线图等组件
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
// 引入饼图
import 'echarts/lib/chart/pie'
// 引入提示框和title组件，图例
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

Vue.component('v-chart', ECharts)

3.打开 build 文件夹中的 webpack.base.conf.js 文件，修改

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

4.使用

5.下载主题及引入
在echarts官网下载主题https://echarts.baidu.com/theme-builder/

image.png

效果图如下

image.png