在vue中实现echarts随窗体变化
<div id="myChart" :style="{width: '100%', height: '345px'}"></div> <script> export default { mounted(){ this.drawLine(); }, methods: { drawLine(){ var myChartContainer = document.getElementById('myChart'); //用于使chart自适应宽度,通过窗体宽计算容器高宽 var resizeMyChartContainer = function(){ myChartContainer.style.width=(document.body.clientWidth-75)+'px' } //设置容器高宽 resizeMyChartContainer() // 基于准备好的dom,初始化echarts实例 var myChart = this.$echarts.init(myChartContainer) // 绘制图表 myChart.setOption({ title: { text: '启动次数' }, tooltip: {}, xAxis: { type: 'category', data: ['2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21'] }, yAxis: { type:'value' }, series: [{ type: 'line', data: [0,0, 0, 7, 0, 0,12], smooth:true, symbol: 'circle', symbolSize: 6, itemStyle:{ normal:{ color:'#fc8a0f', lineStyle:{ color:'#ff9c35' } } } }], }); window.onresize=function(){ resizeMyChartContainer(); myChart.resize(); } } }}</script>
补充知识:echarts 图表大小随窗口变动而自适应变动(无需刷新浏览器调整)
问题提出:
使用echars做完图表之后,需要根据浏览器窗口的缩放做自适应效果。
原因分析及解决方案:
echars的图标实例事实上并没有主动的去绑定resize()事件,就是说显示区域的大小改变内部并不知道,当你需要去做一些自适应的效果的时候,需要主动绑定这个时间才能达到自使用的效果,常见的如window.onresize = myChart.resize()
示例:
var map5 = echarts.init(document.getElementById('map5')); var option5 = { backgroundColor: '#def1f9', color: ['#c23531', '#1875ff'], title: { left: 10, top: 10, text: 'Bill charts for the past year' }, // color: ['#1875ff', '#1fe6ab', '#eee119', '#ff3074', '#6f99d9'], legend: { top: 30, right: 30 }, tooltip: {}, xAxis: {type: 'category'}, yAxis: {}, series: [ {type: 'bar'}, {type: 'bar'} ] } map5.setOption(option5); window.onresize = function () { setTimeout(function () { map1.resize() map2.resize() map3.resize() map4.resize() map5.resize() },10) }
重点:
window.onresize = function () { map1.resize() ; // 如果有多个图标变动,可写多个 }
以上这篇在vue中实现echarts随窗体变化就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- vue使用echarts实现水平柱形图实例
- 在vue中实现清除echarts上次保留的数据(亲测有效)
- vue 项目引入echarts 添加点击事件操作
- 在项目vue中使用echarts的操作步骤
- vue中echarts引入中国地图的案例
- 关于vue 结合原生js 解决echarts resize问题
- 在Vue 中实现循环渲染多个相同echarts图表
- 在vue中使用echarts(折线图的demo,markline用法)
- 解决Vue + Echarts 使用markLine标线(precision精度问题)
- 解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
- 在vue中使用Echarts利用watch做动态数据渲染操作
- 完美解决vue 中多个echarts图表自适应的问题
- 在vue中使用Echarts画曲线图的示例
相关文章
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
这篇文章主要介绍了vue.js中使用微信扫一扫解决invalid signature问题(推荐),本文通过实例代码给出解决方法,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04vue3中如何通过ref和$parent结合defineExpose实现父子组件之间的通信
这篇文章主要介绍了vue3中通过ref和$parent结合defineExpose实现父子组件之间的通信,Vue3中通过ref和$parent的结合使用,及defineExpose的方法,可以非常便捷地实现父子组件之间的通信,需要的朋友可以参考下2023-07-07vue radio单选框,获取当前项(每一项)的value值操作
这篇文章主要介绍了vue radio单选框,获取当前项(每一项)的value值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09详解axios 全攻略之基本介绍与使用(GET 与 POST)
本篇文章主要介绍了axios 全攻略之基本介绍与使用(GET 与 POST),详细的介绍了axios的安装和使用,还有 GET 与 POST方法,有兴趣的可以了解一下2017-09-09
最新评论