我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
使用ECharts
目前国内的图表库,除了百度的echarts就是蚂蚁的antv了,蚂蚁的图表样式更好看,相对来说,他的学习成本也很高,echarts已经是一个老牌图表了,有着比较完善的用法和社区。
这里就了解下vue里面使用echarts需要注意的一些问题。
使用ECharts
ECharts有提供一个vue版本的插件,也是由百度官方vue团队维护,有兴趣可以看看。
我们这里就先不用这个插件了,用npm的方式安装
npm install echarts
安装完毕后我们就可以import引入
<script>
import echarts from "echarts";
</script>
引入后我们要使用图标,需要进行初始化,echarts提供了init初始化方法,它接受一个参数,这个参数是一个dom对象,也就是图表的容器元素。
vue的话,我们使用ref的方式获取容器dom对象。
初始化完毕后我们需要设置参数,echarts初始化完毕后返回一个echarts对象,这个对象有一个setOption方法,可以传入一个图标的参数对象。
<template>
<div ref="chartDom" style="height: 400px"></div>
</template>
<script>
import echarts from "echarts";
export default {
mounted(){
var echart = echarts.init(this.$refs.chartDom);
echart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
</script>
这样一个基本的图表就创建完成了,但是会遇到一个问题,就是图表的宽度可能会不正常。
原因是因为vue在渲染html的时候,可能class还未完全生效,图表就已经初始化完成了,这就导致图表的宽度大于实际显示的宽度。
为了解决这个问题我们需要在容器发生resize事件的时候,对图表重新渲染。
容器resize事件
有一个插件,专门处理这个事件:resize-detector
npm i resize-detector
这个插件有两个方法,一个是添加resize事件,一个是移除resize事件
import { addListener, removeListener } from 'resize-detector'
用法:
addListener(elem, callback)
removeListener(elem, callback)
都两个参数,第一个参数是dom对象,第二个是回调,addListener添加完毕后,每次resize事件都会触发回调,而removeListener的回调,看需要把,如果有需要可以使用回调,但是一般也用不着。
防抖动优化
resize可能会触发很多次,那么重复触发同一个函数,其实没必要的,因为最有效的,应该是最后那一次。
所以我们要进行防抖动,你可以自己书写防抖动方法,这里使用lodash库的debounce方法。
<template>
<div ref="chartDom" style="height: 400px"></div>
</template>
<script>
import echarts from "echarts";
import { addListener, removeListener } from 'resize-detector';
import debounce from "lodash/debounce";
export default {
methods:{
resize(){
this.chart.resize();
}
},
created() {
//防抖动
this.resize = debounce(this.resize, 300);
},
mounted(){
this.chart = echarts.init(this.$refs.chartDom);
this.chart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
//监听resize
addListener(this.$refs.chartDom, this.resize);
},
beforeDestroy() {
//清理残留
removeListener(this.$refs.chartDom, this.resize);
this.chart.dispose();
this.chart = null;
},
}
</script>
由于我们的vue组件可能会被销毁,那么我们注册的事件也需要被销毁。
图表参数
我们的图表一般会被封装成一个组件,所以,参数应该是由父组件传过来的,我们props接受这个参数。
那么如果我们的参数发生了变化,图表也要进行重绘,所以数据就要进行监听。
但是对象的监听,如果使用深度监听的话,性能消耗是非常大的,所以推荐在修改参数的时候,对象某个值修改后,复写整个对象
this.chartOption.xxx = xxx;
this.chartOption = { ...this.chartOption }; //触发vue的更新
这样图表本身只需要watch普通监听即可了,具体代码就不写了,很简单。
评论(0)