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

　　// 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的宽高才能生效

　　},