如何在Vue中实现Echarts随窗体变化

　　介绍

这篇文章运用简单易懂的例子给大家介绍如何在Vue中实现Echarts随窗体变化,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

如何在Vue中实现Echarts随窗体变化

& lt; p id=癿yChart":风格=皗宽度:& # 39;100% & # 39;,高度:& # 39;345 px # 39;}“祝辞& lt;/p> 　　& lt; script>出口默认{ 　　安装(){ 　　this.drawLine (); 　　}, 　　方法:{ 　　画直线(){ 　　var myChartContainer=. getelementbyid (& # 39; myChart& # 39;);//用于使图表自适应宽度,通过窗体宽计算容器高宽 　　var resizeMyChartContainer=function () { 　　myChartContainer.style.width=(document.body.clientwidth - 75) + & # 39; px # 39; 　　}//设置容器高宽 　　resizeMyChartContainer ()//基于准备好的dom,初始化echarts实例 　　var myChart=Ｃ涝猠charts.init (myChartContainer)//绘制图表 　　myChart.setOption ({ 　　标题:{文本:& # 39;启动次数& # 39;}, 　　提示:{}, 　　xAxis: { 　　类型:& # 39;类别# 39; 　　数据:[& # 39;2019 - 02 - 15 & # 39;,& # 39;2019 - 02 - 16 & # 39;,& # 39;2019 - 02年- 17 & # 39;,& # 39;2019 - 02 - 18 - & # 39;,& # 39;2019 - 02年- 19 & # 39;,& # 39;2019 - 02年- 20 & # 39;,& # 39;2019 - 02 - 21 & # 39;】 　　}, 　　桠溪:{ 　　类型:& # 39;价值# 39; 　　}, 　　系列:[{ 　　类型:& # 39;行# 39; 　　数据:[7 0,0,0,0,0,12), 　　平滑:没错, 　　象征:& # 39;圆# 39; 　　symbolSize: 6, 　　itemStyle: { 　　正常:{ 　　 　　颜色:& # 39;# fc8a0f& # 39; 　　线型:{ 　　颜色:& # 39;# ff9c35& # 39; 　　} 　　} 　　} 　　}), 　　}）; 　　window.onresize=function () { 　　resizeMyChartContainer (); 　　myChart.resize (); 　　} 　　} 　　}}& lt;/script>

<强> echarts图表大小随窗口变动而自适应变动(无需刷新浏览器调整)

<强>问题提出:

使用echars做完图表之后,需要根据浏览器窗口的缩放做自适应效果。

如何在Vue中实现echarts随窗体变化

<强>原因分析及解决方案:

echars的图标实例事实上并没有主动的去绑定调整()事件,就是说显示区域的大小改变内部并不知道,当你需要去做一些自适应的效果的时候,需要主动绑定这个时间才能达到自使用的效果,常见的如窗口。onresize=myChart.resize ()

<强>示例: 

 var map5=echarts.init (. getelementbyid (& # 39; map5& # 39;));
　　var option5={
　　写成backgroundColor: & # 39; # def1f9& # 39;
　　颜色:[& # 39;# c23531& # 39;, & # 39; # 1875 ff # 39;],
　　标题:{
　　左:10
　　上图:10
　　文本:比尔& # 39;图表在过去年# 39;
　　},//颜色:[& # 39;# 1875 ff # 39;, & # 39; # 1 fe6ab& # 39;, & # 39; # eee119& # 39;, & # 39; # ff3074& # 39;, & # 39; # 6 f99d9& # 39;],
　　传说:{
　　:30,
　　右:30
　　},
　　提示:{},
　　
　　xAxis:{类型:& # 39;类别# 39;},
　　桠溪:{},
　　系列:[
　　{类型:& # 39;酒吧# 39;},
　　{类型:& # 39;酒吧# 39;}
　　］
　　}
　　map5.setOption (option5);
　　
　　窗口。onresize=function () {
　　setTimeout(函数(){
　　map1.resize ()
　　map2.resize ()
　　map3.resize ()
　　map4.resize ()
　　map5.resize ()
　　},10)
　　}

窗口。onresize=function () { 　　map1.resize ();//如果有多个图标变动,可写多个 　　}

关于如何在Vue中实现Echarts随窗体变化就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

如何在Vue中实现Echarts随窗体变化