vue echarts map的使用，页面多图动态自适应

最近在vue中使用echarts时，遇到了一些坑，在此记录一下。

1：echarts map的使用

2：页面多图自适应，只有一个图生效

3：根据设备的dpr，动态的修改了meta标签中的initial-scale，导致引入的类似于echarts这样的外部插件的字体也产生了缩放

 

在echarts3.x后，echarts不在内置地图数据，地图的json数据需要单独下载引入。在vue中使用时，地图的json文件在node_modules中的echarts中，并不需要单独下载了。

代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111

<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进行处理，但是发现只有一个图表会自适应拖动效果。

?

1 2 3 4

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

原因：wndow.onsize事件在同一页面中只会发生一次，因此会导致有点组件中window.onresize事件未发生

向window对象添加事件句柄

?

1 2 3 4

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

 

 

---

 

 

当修改了meta标签中的meta标签中的scale时，导致类似于echarts这样的库文字也会缩放，体验不好

动态修改meta中content的值，设置根节点字体大小

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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'即可正常显示。