echarts圖示如何自適應寬度

haonanElva發表於2024-08-07

echarts 圖示直接設定寬度 100% 會預設魏100px,需要自適應方法如下

圖示html

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

date裡面定義圖表

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);
        },

圖示的資料賦值就正常賦值就好了

相關文章