特征
•轻量,高效,按需绑定事件 •支持按需导入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'; //以饼图为例
三、例子
•从接口获取的动态数据可以直接通过props从父组件传过来,替换下面的series[0].data数组中的数据 •也可以从这个组件中从接口获取动态数据。但option属性对应的变量pie必须写在computed中return出来,不能再写在data中,否则获取不到数据
总结
以上所述是小编给大家介绍的在vue中使用vue-echarts-v3的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。