在vue中使用vue-echarts-v3的实例代码

前端之家收集整理的这篇文章主要介绍了在vue中使用vue-echarts-v3的实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

特征

•轻量,高效,按需绑定事件 •支持按需导入ECharts.js图表​​和组件 •支持组件调整大小事件自动更新视图

一、安装

npm install --save echarts vue-echarts-v3

二、用法

用 vue-cli 搭建的项目,打开 build 文件夹中的 webpack.base.conf.js 文件

1、webpack 1.x 修改成如下

2、webpack 2.x 修改成如下

3、导入所有图表和组件

import IEcharts from 'vue-echarts-v3/src/full.js';

4、手动导入ECharts.js模块以减少捆绑包大小

标题组件 import 'echarts/lib/component/legend'; //引入图例组件 import 'echarts/lib/component/tooltip'; //引入提示框组件 import 'echarts/lib/component/toolBox'; //引入工具箱组件 // ...(引入自己需要的) import 'echarts/lib/chart/pie'; //以饼图为例

三、例子

关于Echarts的API使用参照

•从接口获取的动态数据可以直接通过props从父组件传过来,替换下面的series[0].data数组中的数据 •也可以从这个组件中从接口获取动态数据。但option属性对应的变量pie必须写在computed中return出来,不能再写在data中,否则获取不到数据

总结

以上所述是小编给大家介绍的在vue中使用vue-echarts-v3的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章