vue中echarts调用接口_Vue中使用echarts图表的两种方式

VUE中使用Echarts

1. 方式一

echarts 的引用 (需要自己初始化echart对象[init], 然后setOption({})设置属性，构建echart图表)

echart的安装引入

安装命令：npm install echarts --save

页面引入：import Echarts from 'echarts'

页面使用：在created mounted methods 等区域使用

//初始化echart对象

let echarts = Echarts.init(document.getElementById('chartBox'));

//设置参数

echarts.setOption(this.pieOption);

//监听重置大小的处理事件

window.addEventListener('resize', this.handleResize);

//绑定图表点击事件

echarts.on("click", clickEvent);

//可以在 main.js 中全局引入 echarts

import echarts from "echarts";

Vue.prototype.$echarts = echarts;

// 基于准备好的dom，初始化echarts实例

let myChart = this.$echarts.init(document.getElementById("main"));

2. 方式二

vue-echarts 的引用(将echart集成成vue的一个组件，页面上可以直接用标签来实现图表，更加便捷)

安装命令：npm install vue-echarts --save-dev

页面引入： import ECharts from 'vue-echarts'

//引入相关组件

import "echarts/lib/chart/bar";

import "echarts/lib/chart/line";

import "echarts/lib/chart/map";

import "echarts/extension/dataTool/index";

components: { 'ECharts': ECharts }//引入组件

页面使用:

methods onClick(event, instance, echarts) {

console.log(event);

console.log(instance);

console.log(echarts);

},

文章来源: www.oschina.net，作者：wpfc，版权归原作者所有，如需转载，请联系作者。

原文链接：https://my.oschina.net/u/2326864/blog/4287707