Vue中使用Echarts可視化圖表寬度自適應的完美解決方案

更新時間：2022年09月17日 08:13:53 作者：ZGH_77733

這篇文章主要介紹了Vue中使用Echarts可視化圖表，寬度自適應解決方案,我的解決方案是，在放置Echarts的容器(div)外層再套一層容器(div)，外層容器寬度固定設置手機屏幕寬，感興趣的朋友跟隨小編一起看看吧

一、問題闡述：

開發(fā)H5項目中應用到Echarts數(shù)據(jù)可視化，由于H5主要使用在手機，屏幕寬度大大限制了圖表的展現(xiàn)，問題如下。

上圖中x軸的數(shù)據(jù)是動態(tài)的，從2022年切換到2021年數(shù)據(jù)變化，此時如果x軸的數(shù)據(jù)過多就會顯得格外擁擠。

二、解決思路：

我的解決方案是，在放置Echarts的容器(div)外層再套一層容器(div)，外層容器寬度固定設置手機屏幕寬，并設置溢出顯示滾動條(width: 100%;overflow: auto)，內(nèi)層Echarts容器寬度初始寬為100%，如果數(shù)據(jù)大于設定的量時，就加大放置Echarts的容器寬度。

本以為能順利解決問題時，然而效果并不盡人意，效果如下。

1. 容器寬度改變了

2. 滾動條出現(xiàn)

3. 圖表未加寬到容器寬度

其實每次更改篩選條件都會從新創(chuàng)建實例，但Echarts圖表并未按照預期加寬，感覺就像緩存了最初設定的容器寬度一樣。

仔細看文檔才發(fā)現(xiàn)，原來Echarts圖表本身是提供了一個resize的函數(shù)專門處理這類問題。

三、最終效果：

完整代碼如下

<!-- 學生統(tǒng)計 折線圖 HTML部分 -->
<div class="stuCensus_box">
   <div
    id="student_census"
    class="student_census"
    ref="student_census"
   ></div>
</div>
 
// js部分 學生統(tǒng)計 折線圖
initStudentCensus() {
// 根據(jù)x軸內(nèi)容長短設定echarts的寬度
   if (this.stuCensus_xAxis.length > 9) {
     this.$refs.student_census.style.width = "200%";
   } else if (this.stuCensus_xAxis.length > 5) {
     this.$refs.student_census.style.width = "130%";
   } else {
     this.$refs.student_census.style.width = "100%";
   }
 
   var myChart = this.$echarts.init(this.$refs.student_census);
 
   var option = {
     tooltip: {
       trigger: "axis",
       extraCssText: "max-height: 200px; overflow: auto;", // 設置懸浮窗樣式
       position: function (pos, params, dom) {
       dom.style.pointerEvents = "auto"; // 修改懸浮窗不可綁定事件的css屬性
       },
     },
     legend: {
       type: "scroll",
       data: this.stuCensus_legend,
     },
     grid: {
       top: "14%",
       left: "0",
       right: "1%",
       bottom: "3%",
       containLabel: true,
     },
     xAxis: {
       type: "category",
       data: this.stuCensus_xAxis,
       axisLabel: { rotate: 45 },
     },
     yAxis: {
       type: "value",
       axisLabel: axisLabel,
     },
     series: this.stuCensusSeries,
   };
   myChart.setOption(option, true);
   myChart.resize(); // 調(diào)用此API更新echarts的寬高才能生效
},

1. 用$refs設定容器寬度。

2. setOption創(chuàng)建可視化圖表實例

3. resize重繪可視化圖表

效果如下