echarts图表跟随屏幕缩放适配

 

//图表随屏幕适配
window.addEventListener('resize',function (){
  echartDuidie.resize();
})

里面的echartDuidie是自己定义的选项

<template>
  <div style="display: flex;">
    <div style="width: 200px;height: 300px"></div>
    <div id="mainDuidie" style="border: 1px solid red;flex-grow: 1"></div>
  </div>
</template>

<script>

export default {
  watch: {

  },
  mounted() {
    // window.onresize = () => {
    //   return (() => {
    //     this.$nextTick(() => {
    //       console.log('this.$refs.wrapper', window.innerWidth)
    //     })
    //   })()
    // }
    var echartDuidie=this.$echarts.init(document.getElementById('mainDuidie'))
    var option={
      title:{text:'堆叠-满城-莲池'},
      //工具箱
      toolbox: {
        //显示工具箱
        show: true,
        feature: {
          //数据缩放
          dataZoom: {
            yAxisIndex: 'none'
          },
          //数据视图只读
          dataView: { readOnly: false },
          //魔法类型
          magicType: { type: ['line', 'bar'] },
          //重置
          restore: {},
          //保存图像
          saveAsImage: {}
        }
      },
      legend:{data:['满城','莲池']},
      //tooltip提示 trigger触发器
      //axis轴线触发 item当前项触发
      tooltip:{
        trigger:'axis'
      },
      grid:{
        left:'12%',
        containLabel:false
      },
      yAxis:{
        data:['vue','js','html'],
        //  修改刻度标签相关样式
        axisLabel:{
          color:"#99ff22",
          fontSize:12,
        },
        //不显示y轴的线
        axisLine:{
          show:false,
        },
        //不显示y轴的刻度
        axisTick:{
          show:false
        }
      },
      xAxis:{
        show:false
      },
      series:[
        //  stack:true允许堆叠
        //  label图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
        //  label:{show:true}显示数据
        //  label:{ position: 'top'}标签显示的位置
        //  inside:内部 top上面
        //  label:{ formatter: '{b}: {@score}'}标签内容格式
        //  \n换行
        //  {a}：系列名。
        //  {b}：数据名。
        //  {c}：数据值。
        //  {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
        //  {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。
        {
          name:'满城',
          type:'bar',
          color:'#550044',
          data:[88,44,55],
          //修改柱子宽度
          barWidth:10,
          stack:true,
          //柱子之间的距离
          barCategoryGap:50,
          itemStyle:{
            //修改柱子圆角
            barBorderRadius:15
          },
          label:{
            show:true,
            formatter: '{a}:\n{b}{c}分'
          }
        },
        {
          name:'莲池',
          type:'bar',
          data:[95,167,82],
          //修改柱子宽度
          barWidth:10,
          stack:true,
          label:{
            show:true,
            position:'insideTop',
            formatter: '{a}:\n{b}{c}分'
          }
        },
      ]
    }
    echartDuidie.setOption(option)
    //图表随屏幕适配
    window.addEventListener('resize',function (){
      echartDuidie.resize();
    })
  }
}
</script>

<style scoped>

</style>