vue-echarts在vue中的使用

时间:2019-09-30
本文章向大家介绍vue-echarts在vue中的使用,主要包括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.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" />

原文地址:https://www.cnblogs.com/padding1015/p/11611600.html