先看效果图：

 

 

 代码如下：

 <div id="lineChart" class="width:100%;height:100%"></div>

//自适应字体大小变化
 WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 5280;
      return fontSize * res;
 },

myecharts() {       let myChart = this.$echarts.init(document.getElementById("lineChart"));
      // 绘制图表       //myChart.setOption({       var option = {         grid: {           left: this.WidthAdaptive(90),           top: this.WidthAdaptive(80),           height: "63%",           width: "85%",         },         xAxis: [           {             type: "category",             data: [               "10/09",               "10/10",               "10/11",               "10/12",               "10/13",               "10/14",               "10/15",             ],             boundaryGap: true,             splitLine: {               //show: true,               lineStyle: {                 type: "solid",               },             },             axisLine: {               lineStyle: {                 type: "solid",                 color: "rgba(77, 101, 129, 0.8)",               },               symbol: ["none", "arrow"],               symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],               symbolOffset: this.WidthAdaptive(10),             },             axisTick: {               show: false,
              alignWithLabel: true,             },             axisLabel: {               fontSize: this.WidthAdaptive(24),               fontFamily: "Source Han Sans CN",               fontWeight: 400,               lineHeight: this.WidthAdaptive(40),               color: "#cccccc",               margin: this.WidthAdaptive(12),             },           },         ],         yAxis: {           name: "单位: 人",           type: "value",           splitLine: {             lineStyle: {               type: "dashed",               color: "rgba(105, 119, 135, 0.6)",             },           },           axisLine: {             show: true,             lineStyle: {               type: "solid",               color: "rgba(77, 101, 129, 0.8)",             },             symbol: ["none", "arrow"],             symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],             symbolOffset: this.WidthAdaptive(10),           },           axisTick: {             show: false,           },           axisLabel: {             fontSize: this.WidthAdaptive(24),             fontFamily: "Source Han Sans CN",             fontWeight: 400,             lineHeight: this.WidthAdaptive(50),             color: "#cccccc",             margin: this.WidthAdaptive(13),           },           nameGap: this.WidthAdaptive(20),           nameTextStyle: {             fontSize: this.WidthAdaptive(24),             fontFamily: "Source Han Sans CN",             fontWeight: 400,             lineHeight: this.WidthAdaptive(50),             color: "#cccccc",           },         },         series: [           {             data: [1272, 1500, 1750, 1204, 1500, 927, 2000],             type: "line",             lineStyle: {               color: "#0095FF",               width: this.WidthAdaptive(6),             },             symbol: "circle",             symbolSize: this.WidthAdaptive(33),             itemStyle: {               color: "rgba(0,191,143,0)",               borderColor: "#ffffff",               borderType: "solid",               borderWidth: this.WidthAdaptive(2),             },             smooth: true,             z: 1,           },           {             type: "scatter",             data:[1272, 1500, 1750, 1204, 1500, 927, 2000],             symbolSize: this.WidthAdaptive(16),             itemStyle: {               color: "#ffffff",               opacity: 1,             },             emphasis: {               scale: false,             },             z: 2,           },         ],         // });       };       myChart.setOption(option);
      window.onresize = myChart.resize;     },