Vue中使用Echarts可视化图表宽度自适应的完美解决方案

<!-- 学生统计 折线图 HTML部分 -->
<div class="stuCensus_box">
   <div
    id="student_census"
    class="student_census"
    ref="student_census"
   ></div>
</div>
 
// js部分 学生统计 折线图
initStudentCensus() {
// 根据x轴内容长短设定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(); // 调用此API更新echarts的宽高才能生效
},