<template>
  <div>
    <div>
  <!--为echarts准备一个具备大小的容器dom-->
      <div id="org_ech_line"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      is_condolences: 0, // 控制收入折线图
      isAll: 0,
      is_active: 0,

      //
      // charts: '',
      /*  opinion: ["1", "3", "3", "4", "5"], */
      opinionData: ['3', '2', '4', '4', '5'],
      //
      incomeLineData: ['3', '2', '4', '4', '5'] // 主要收入情况-折线数据
    }
  },
  methods: {

    // 组织建设-折线图
    orgLine(id) {
      const charts = echarts.init(document.getElementById(id))
      charts.setOption({
        tooltip: {
          trigger: 'axis',
          showContent: true, // 鼠标悬停-提示信息 false-不提示 true-提示
          formatter: '组织数量: {c0}'
        },
        // legend: {
        //   data: ['近七日收益']
        // },
        // legend: {
        //   data: ['近七日收益'] //标题
        // 设置图例前面样式
        // itemStyle: {
        //   color: 'blue'
        // },
        // 设置图例文字颜色
        // textStyle: {
        //   // color: '#4996f5'
        //   color: 'red'
        // }
        // },
        grid: {
          left: '3%',
          top: '10%',
          right: '4%',
          bottom: '10%',
          // 设置文字溢出正常显示
          containLabel: true,
          // 显示网格-显示边框
          show: false
          // 设置边框颜色
          // borderColor: '#01233e'

        },
        //  释放开会显示 -右上角下载按钮
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          // boundaryGap: false, //控制 X轴 第一个值 是紧挨Y轴还是 不紧挨Y轴 false-紧挨Y轴  ture-不紧挨
          data: ['2017', '2018', '2019', '2020', '2021'],
          // 设置文字颜色
          axisLabel: {
            // show: true,  //是否显示X轴下面文字
            color: '#6e7379', // 更改坐标轴文字颜色
            fontSize: 12 // 更改坐标轴文字大小
          },
          // 隐藏刻度线
          axisTick: {
            show: false // false-隐藏  true-不隐藏
          },
          axisLine: {
            lineStyle: {
              // color: 'transparent' // 更改坐标轴颜色  -隐藏刻度线
              // color: 'red' // 更改坐标轴颜色
            }
          }

        },
        yAxis: {
          type: 'value',
          // 隐藏刻度线
          axisTick: {
            show: false
          },
           max : 200,
            min : 0,
            splitNumber : 5,//!!!吧Y轴分割成5分,份数可以改
            boundaryGap : [ 0.2, 0.2 ]

          axisLine: {
            lineStyle: {
              // color: 'transparent' // 更改坐标轴颜色  -隐藏刻度线
              // color: 'transparent' // 更改坐标轴颜色
            }
          },
          //  改变y轴字体颜色和大小
          // 设置文字颜色
          axisLabel: {
            show: true, // 是否显示Y轴左面的文字
            color: '#6e7379', // 更改坐标轴文字颜色
            fontSize: 12 // 更改坐标轴文字大小
          }

        },

        // series: [{
        //   name: '组织数量',
        //   type: 'line',
        //   // stack: '总量',
        //   data: this.opinionData,
        //   itemStyle: {
        //     normal: {
        //       color: '#51BAE4' //  给折线添加颜色
        //     }
        //   }

        // }]
        series: [

          {
            name: '搜索引擎',
            type: 'line',
            symbol: 'circle', // 拐点设置为实心
            symbolSize: 8, // 拐点大小
            stack: '总量',
            animation: true, // false: hover圆点不缩放 .true:hover圆点默认缩放
            lineStyle: {
              normal: {
                color: 'red', // 折线的颜色
                width: '2'// 折线粗细
              }
            },
            itemStyle: {
              normal: {
                color: 'blue', // 拐点颜色
                borderColor: '#000000', // 拐点边框颜色
                borderWidth: 3// 拐点边框大小
              },
              emphasis: {
                color: '#000000'// hover拐点颜色定义
              }
            },
            areaStyle: {
              normal: {
                color: '#999999'// 折线下面区块的颜色
              }
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      })
    }

  },
  // 调用
  mounted() {
    this.$nextTick(function() {
      this.orgLine('org_ech_line')
      // this.incomeLine('income_ech_line')
    })
    // this.$nextTick(function() {
    //   this.incomeLine('income_ech_line')
    // })
  }
}
</script>

<style>
 #org_ech_line{
                width: 500px;
                height: 500px;
              }
</style>

echarts字体大小自适应

参考了以下链接
添加链接描述