echarts图标如何自适应宽度

echarts 图标直接设置宽度 100% 会默认魏100px，需要自适应方法如下

图标html

<el-col :span="8">
                        <div id="userNianling_three" 
                            style="width: 100%; height: 500px;" 
                        />
                    </el-col>

date里面定义图表

?

1 2 3 4 5

data() {             return {                  myChart: null,                                                      }         },

　　mounted里面

mounted() {  
            // 宽度变化动态变化宽度
            this.__resizeHandler = debounce(() => {
                if(this.myChart) {
                    this.myChart.resize()
                }
            }, 100)
            window.addEventListener('resize', this.__resizeHandler)

            // 宽度给个初始化-某则只能变化宽度才能变化
            this.__resizeHandler()
        },

然后页面销毁要去除监听

beforeDestroy() {
            window.removeEventListener('resize', this.__resizeHandler);
        },

图标的数据赋值就正常赋值就好了

页面需要引入方法

import { debounce } from '@/utils'

untils 里面

export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }