vue中echarts3.0自适应的方法

网友投稿 318 2023-02-16


vue中echarts3.0自适应的方法

前端时间做一个vue的项目,echart是按需引入的如下:

// 引入 ECharts 主模块

import echarts from 'echarts/lib/echarts'

// 引入折线图

import 'echarts/lib/chart/line'

// 引入提示框和图例组件

import 'echarts/lib/component/tooltip'

import 'echarts/lib/component/legendScroll'

然后发现在缩放浏览器窗口时折线图并不会自适应,费了好一会才解决,记录下来给需要的小伙伴,

第一种:浏览器自适应

通过:

在myChart.setOption后添加

window.onresize = myChart.resize;

如果有多个图形,可以封装成方法:

mounted(){

this.changEcharts();

},

methods:{

changEcharts() {

window.addEventListener('resize', ()=> {

this.drawLineDom.resize();

this.todayFlowDom.resize();

this.hitRateDom.resize();});};},}

this.drawLineDom = this.$echarts.init(document.getElemehttp://ntById('chart-bandwidth'));

第二种情况,根据div大小的变化进行自适应

因为vue不能实时监测div大小变化的,所以我定义了一个按键,当按键的值变化的时候,进行resize;

import { mapState }from'vuex';

computed: mapState({isCollapse:'isCollapse',//这里我是语用的vuex保存的变量,可以不用vuex,我是因为组件之间的通讯}),

watch: {

isCollapse() { // 注意一定不要用箭头函数,会获取不到this

setTimeout(() => {

this.drawLineDom.resize();

this.todayFlowDom.resize();

this.hitRateDom.resize();

}, 500);},},

其实我用这个是在导航进行伸缩的时候,导致div大小发生了变化,所以这样执行reszie,就能完美的自适http://应


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java并发系列之Semaphore源码分析
下一篇:接口测试实例(简单的接口测试实例)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~