vue-echarts在vue中的使用

xing.org1^

发布于 2019-09-30 16:48:07

2.6K0

安装依赖：

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-09-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度

vue-echarts在vue中的使用

vue-echarts在vue中的使用

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐