自学过程用来记录

代码可以直接使用,新建一个组件就可以了,mapData数据来源于阿里的平台

​​​​​​http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5

 

 复制json Api在浏览器打开,会出现如下内容

 新建mapData.js文件,文件内容如下:

 

 只要在前面加上export let mapData,组件内部如下,采用的是安徽省地图

<template>
  <div id="myecharts" ref="map"></div>
</template>

<script>
import * as echarts from  'echarts';
import {mapData} from "../assets/static/mapData"
export default {
  name:'Middle',
mounted(){
  let myChart=echarts.init(this.$refs.map);
  echarts.registerMap('anhui',mapData);
  let option={
    geo:{
      type:'map',
      map:'anhui',
      //roam:true, 
      //zoom:10 ,//平移
      label:{
        show:true
      }
    }
  };
  myChart.setOption(option);

}
}
</script>

<style>
#myecharts{
  width: 600px;
  height: 500px;
}
</style>

Logo

前往低代码交流专区

更多推荐