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的一个组件,页面上可以直接用<Echart>标签来实现图表,更加便捷)
安装命令: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 }//引入组件
页面使用: <ECharts
ref="chart1O"
:options="chartOption"
:auto-resize="true"
@click="onClick" //图表绑定点击事件
theme="light"></ECharts>
methods onClick(event, instance, echarts) {
console.log(event);
console.log(instance);
console.log(echarts);
},
来源:http://www.totozhan.com/?special=jiaohu