时间:2021-05-26
前端时间做一个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;如果有多个图形,可以封装成方法:
第二种情况,根据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,就能完美的自适应
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
main.js中importechartsfrom'echarts'Vue.prototype.$echarts=echartsvue文件中_this.cale
接口方面 小米路由器提供三个10/100/1000M自适应LAN口以及一个10/100/1000M自适应LAN口,另外还一个USB3.0接口。 其他方面
最近工作中需要用到echarts,由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是
jqueryeasyUIdatagrid如何让宽度自适应的方法如下: fitColumns:true; //fitColumns自适应列宽的属性,当设置
自适应网页设计是响应式网页设计一种,细分自适应指网页中整体大图的自适应或者banner的自适应。响应式网站的优点就是不管PC、Pad还是手机都是采用一套代码,不