vue echarts map的使用，頁面多圖動態自適應

最近在vue中使用echarts時，遇到了一些坑，在此記錄一下。

1：echarts map的使用

2：頁面多圖自適應，只有一個圖生效

3：根據設備的dpr，動態的修改了meta標簽中的initial-scale，導致引入的類似於echarts這樣的外部插件的字體也產生了縮放

 

在echarts3.x后，echarts不在內置地圖數據，地圖的json數據需要單獨下載引入。在vue中使用時，地圖的json文件在node_modules中的echarts中，並不需要單獨下載了。

代碼如下：

<template>
    <div class="map" id="s-map">
        <div id="chartMap" class="chartGauge" :style="{height:height,width:width}"></div>
    </div>
</template>

<script type="text/ecmascript-6">
　　 // 在之前已經單獨引入了echarts文件
　　 // 在此只需引入需要的地區的json文件
    import gz from 'echarts/map/json/province/guizhou'
    
    export default {
        components: {
            
        },
        data () {
            return {
                font: '24'
            }
        },
        props: {
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '400px'
            }
        },
        watch: {},
        methods: {
            drawmap() {
                let chartMap = document.getElementById('chartMap');
                let smap = document.getElementById('s-map');
　　　　　　　　　 // 動態修改圖表的寬高，達到自適應的效果　
                var resizeWorldMapContainer = function () {
                    chartMap.style.width  = smap.clientWidth +'px';
                    chartMap.style.height = smap.clientHeight + 'px';
                };
                resizeWorldMapContainer();
                // 注冊可用的地圖
                echarts.registerMap('guizhou', gz);
                let myChart = echarts.init(chartMap);
                myChart.setOption({
                    roam: false,
                    series: [
                        {
                            name: '',
                            type: 'map',
                            map: 'guizhou',
                            mapType: '貴州',
                            roam: false,
                            zoom: 1.2,
                            itemStyle:{
                                normal:{
                                    areaColor: '#181d36',
                                    label:{
                                        show:true,
                                        textStyle: {
                                            color: '#fff',
                                            fontSize: this.font
                                        }
                                    },
                                },
                                emphasis:{
                                    areaColor: '#fff',
                                    label:{
                                        show:true,
                                        textStyle: {
                                            color: '#398def',
                                            fontSize: this.font
                                        }
                                    }
                                    
                                }
                            },
                            data:[
                                {name: '貴州',value: Math.round(Math.random()*1000)}
                            ]
                        }
                    ]
                });
                /*
                // window的方法在一個頁面只加載一次，window.onresize只在一個圖表中發生一次，因此在一個頁面多圖時，只有一個圖會自適應
                window.onresize = function () {
                    resizeWorldMapContainer();
                    myChart.resize();
                };
                */
                window.addEventListener("resize", function(){
                    resizeWorldMapContainer();
                    myChart.resize();
                })
            }
        },
        filters: {},
        computed: {},
        created () {

        },
        mounted () {
            this.drawmap()
        },
        destroyed () {}
    }
</script>

<style lang="scss" scoped>
    @function px2rem($px) {
        $rem: 75px;
        @return ($px / $rem) + rem;
    }
</style>

 

---

 

同一頁面多圖都達到自適應的效果，如下圖，我在同一個頁面中引入了map和gauge，分別屬於不同的組件，每個組件中都有對圖表自適應的設置，然后通過window.onresize進行處理，但是發現只有一個圖表會自適應拖動效果。

window.onresize = function () {
   resizeWorldMapContainer();
   myChart.resize();
};　　

原因：wndow.onsize事件在同一頁面中只會發生一次，因此會導致有點組件中window.onresize事件未發生

向window對象添加事件句柄

window.addEventListener("resize", function(){
   resizeWorldMapContainer();
   myChart.resize();
})

 

 

---

 

 

當修改了meta標簽中的meta標簽中的scale時，導致類似於echarts這樣的庫文字也會縮放，體驗不好

動態修改meta中content的值，設置根節點字體大小

 

window.addEventListener('resize', () => {
    scale();
}, 300)

function scale(){
    let dpr = window.devicePixelRatio;
    
    let meta = document.getElementsByTagName("meta");
    //動態縮放
    meta[1].setAttribute('content', 'initial-scale=' + 1 / dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no')
    // 獲取視窗寬度
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
        
    // 獲取視窗高度
    let _html = document.getElementsByTagName('html')[0];
        
    _html.style.fontSize = htmlWidth / 10 + 'px';
}

scale();

 

思路是這樣的，獲取頁面的dpr，動態設置圖表的fontSize = dpr*12 + 'px'即可正常顯示。