Vue2 echarts 实现自适应

监听自适应

// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('right'));
let chartsEle = document.getElementById('right');
myChart.setOption({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    right: 0,
    data: ['自评', '组长评', '主管评']
  },
  grid: {
    left: '3%',
    right: '4%',
    top: '15%',
    bottom: '18%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['考核项一', '考核项二', '考核项三', '考核项四', '考核项五']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '自评',
      type: 'line',
      areaStyle: {
        color: '#5b8ff9',
        opacity: 0.3
      },
      lineStyle: {
        color: '#5b8ff9' // 设置线的颜色为红色
      },
      itemStyle: {
        color: '#5b8ff9' // 设置圆点的颜色为红色
      },
      smooth: true, // 设置为 true 表示线条圆滑
      data: [45, 82, 51, 34, 49]
    },
    {
      name: '组长评',
      type: 'line',
      areaStyle: {
        color: '#5ad8a6',
        opacity: 0.3
      },
      lineStyle: {
        color: '#5ad8a6' // 设置线的颜色为红色
      },
      itemStyle: {
        color: '#5ad8a6' // 设置圆点的颜色为红色
      },
      smooth: true, // 设置为 true 表示线条圆滑
      data: [20, 72, 91, 84, 75]
    },
    {
      name: '主管评',
      type: 'line',
      areaStyle: {
        color: '#c258f6',
        opacity: 0.3
      },
      lineStyle: {
        color: '#c258f6' // 设置线的颜色为红色
      },
      itemStyle: {
        color: '#c258f6' // 设置圆点的颜色为红色
      },
      smooth: true, // 设置为 true 表示线条圆滑
      data: [50, 32, 11, 54, 90]
    }
  ]
})


this.windowResize(myChart);
this.observeResize(myChart, chartsEle)

监听窗口自适应

// 监听 windows 做出自适应
windowResize(chart) {
  window.addEventListener('resize', function () {
    // 使用 resize 方法自适应图表大小
    chart.resize();
  });
}

监听父元素自适应

// 监听内部收缩自适应
observeResize(chart, el) {
  const resizeObserver = new ResizeObserver(() => {
    chart.resize();
  });
  resizeObserver.observe(el);
}