vue-echarts教程
资料来源
vue项目中vue-echarts讲解及常用图表方案实现
https://github.com/ecomfe/vue-echarts 教程
安装导入
import Vue from 'vue' import ECharts from 'vue-echarts' // 全局refers to components/ECharts.vue in webpack // 手动按需 import ECharts modules manually to reduce bundle size import 'echarts/lib/chart/bar' import 'echarts/lib/component/tooltip' // If you want to use ECharts extensions, just import the extension package, and it will work // Taking ECharts-GL as an example: // You only need to install the package with `npm install --save echarts-gl` and import it as follows //想要使用拓展包，只需导入安装 import 'echarts-gl' //组件注册 register component to use Vue.component('v-chart', ECharts)
配置
// Vue CLI 3+ 配置 vue.config.js module.exports = { transpileDependencies: [ 'vue-echarts', 'resize-detector' ] }//For Vue CLI 2 配置 with the
webpacktemplate, modifybuild/webpack.base.conf.jslike this:{ 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') + ] }
使用
<v-chart :options="barOptions" autoresize theme="light"></v-chart>