【LSP】vue-echarts在vue中的使用
http://cdn.u1.huluxia.com/g4/M01/65/78/rBAAdl91SVeAfCR-AACt4WdlvYs400.jpg
安装依赖：
【win】npm install echarts vue-echarts
【mac】sudo npm install echarts vue-echarts
Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本，Vue CLI 创建项目可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。
修复方法是在vue.config.js中添加如下代码：http://cdn.u1.huluxia.com/g4/M01/65/78/rBAAdl91SViAVivrAADg7wnJoOM669.jpg
1 // For Vue CLI 3+, add vue-echarts and resize-detector into transpileDependencies in vue.config.js like this:
2 transpileDependencies: [
3 'vue-echarts',
4 'resize-detector'
5 ]
引入：
import ECharts from 'vue-echarts'
各零件按需加载，手动引入 ECharts 各模块来减小打包体积：http://cdn.u1.huluxia.com/g4/M01/65/78/rBAAdl91SVmAQOu9AAFRWiMEnfY940.jpg
import "echarts/lib/chart/line"; // 线图
import "echarts/lib/chart/bar"; // 柱图
import 'echarts/lib/component/legend' // 图例
import 'echarts/lib/component/tooltip' //提示框
etc...
注册：
Vue.component('myEchart', ECharts)
使用组件：
<myEchart :options="echartsOptions" ref="myCharts" />
vue-echarts的options设置基本同echarts，配置文档看echarts官网即可。
页:
[1]