前面是安裝及上手教程，參考了彩色泡泡 和 winne雪 的博客。
如果已經寫好了，可以直接跳到 問題總結。

1. npm install echarts --save

2. 在 main.js 中

import echarts from 'echarts'; Vue.prototype.$echarts = echarts;

3. 在頁面上

import china from 'echarts/map/json/china.json'//注意在獲取 dom 之前寫：echarts.registerMap('china', chinaJson); this.$echarts.registerMap('china', china);

具體代碼：

<div style="width:400px;height:400px;" id="chinaMap" class="echart" ref="chinaMap"></div>data(){return {}},computed:{chinaMap(){ // let d = new Date();// return 'echarts' + d.getTime();return 'echarts' + Math.random() * 100000;}},methods: {randomData(){return Math.round(Math.random()*2500);},drawCharts(){this.$echarts.registerMap('china', china);var myChart = this.$echarts.init(document.getElementById(this.chinaMap));var option = {title: {text:"全國各地回收量分布",left: 'center',textStyle:{color:"#2FA7CF",fontSize: 22}},tooltip: {trigger: 'item',// formatter詳細配置： https://echarts.baidu.com/option.html#tooltip.formatterformatter (params, ticket, callback){let localValue = 0;if (params.data){localValue = params.data.value;} let htmlStr = `<div>${params.data.name}省回收量：${localValue}</div>`return htmlStr;}},visualMap: {min: 0,max: 2500,left: 'left',top: 'bottom',text: ['高','低'], // 文本，默認為數(shù)值文本calculable: false,color:['#FF0000','#84CDFC'],itemWidth: 16,itemHeight: 113,textStyle:{color: '#fff'}},// geo:{ // map: 'china',// zoom:1.2,// aspectScale:.75,// label:{// show:true// },// itemStyle: { // 地圖區(qū)域的多邊形 圖形樣式。// borderColor: 'rgba(0, 0, 0, 0.2)',// emphasis: { // 高亮狀態(tài)下的多邊形和標簽樣式// shadowBlur: 20,// shadowColor: 'rgba(0, 0, 0, 0.5)'// }// }// },series: [{name: '',type: 'map',mapType: 'china',roam: false,// geoIndex: 1, // zoom: 1.2, //不兼容ie// aspectScale:0.75,left: '1%',right:0,top:30,bottom:0,label: {normal: {show: true},emphasis: {show: true}},data:this.data}]};myChart.setOption(option);window.addEventListener('resize',function() {myChart.resize()}); //控制瀏覽器縮放時正常顯示}},mounted(){this.drawCharts();}

地圖在 ie 瀏覽器上不顯示的幾個原因：

1. 使用了 zoom 縮放屬性。

2. echart 的版本問題。

3. html 頁面未添加 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>。

4. 配置項完成后以 , 結尾。 配置項中每個條件結束后，后面不要 ,。

因為不加縮放 zoom ,地圖顯示得太小了，所以在 series 中添加了 left right top等屬性，它會對地圖做出相應的拉升達到效果。

最后實現(xiàn)了想要的效果：

總結

以上是生活随笔為你收集整理的echarts地图在ie浏览器上不显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。