vue-echarts在vue中的使用

概述安装依赖： 【win】npm install echarts vue-echarts【mac】sudo npm install echarts vue-echarts Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本，Vue CLI 创建项目可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。 修复方法是在vue.conf

安装依赖：

【win】npm install echarts vue-echarts【mac】sudo npm install echarts vue-echarts

Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本，Vue Cli 创建项目可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。
修复方法是在vue.config.Js中添加如下代码：

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 各模块来减小打包体积：

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官网即可。

总结

以上是内存溢出为你收集整理的vue-echarts在vue中的使用全部内容，希望文章能够帮你解决vue-echarts在vue中的使用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。