echarts实现地图

1. echarts获取

2. 地图边界数据获取

js代码

 //这里就是从上面得来的JSON
 import {YC_JSON} from '@/assets/utils/YC_JSON.js'

 this.myCharts = echarts.init(document.getElementById('mapCenter'))
 echarts.registerMap("JS", YC_JSON)
 this.myCharts.setOption({
        title: {
          text: "地 图",
          left: "center",
          top: "10px",
          textStyle: {
            color: "rgba(255,255,255,0.9)",
            fontsize: 90
          }
        },
        geo: [
          {
            map: 'JS',
            zlevel: 5,
            top: '10%',

            label: {
              show: true,
              color: '#eee'
            },

            itemStyle: {
              color: '#2075B8', // 背景
              borderWidth: '1', // 边框宽度
              borderColor: '#fff', // 边框颜色
              legend: {
                show: true,
              },
            }
          },
          //这里是加了个2d效果
          {
            map: 'JS',
            top: '11%',
            zlevel: 4,
            itemStyle: {
              color: '#3C5FA1', // 背景
              borderWidth: '1', // 边框宽度
              borderColor: '#3C5FA1', // 边框颜色
              shadowColor: '#fff',  // 外部阴影
              shadowBlur: '10'
            }
          },
        ],
		//这里就是自由发挥的地方了 没这玩意地图也能出来
       // series: tempSeriesArr,
      })