echarts简单地图

关注

原创最新推荐文章于 2026-03-06 06:58:49 发布 1k 阅读 AI 写同款· GEO 优化 ›

在echarts中使用百度地图，卫星地图在echarts中始用百度地图，卫星地图  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script> <script src="https://api.map.baidu.com/api?v=2.... 阅读详情

<template>
  <div id="main1" style="width: 1200px;height: 600px;">
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios'
import chinajson from './1.json'


export default {
  name: 'HelloWorld',
  mounted: () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'), 'dark');
    console.log(chinajson)
    echarts.registerMap('china', chinajson);
    const option = {
      title: {
        text: '中国地图入门示例'
      },
      series: [
        {
          type: 'map',
          roam: true,
          map: 'china'
        }],
    }
    // 绘制图表
    myChart.setOption(option);
  },
  props: {
    msg: String
  }
}
</script>

地图资源链接 DataV.GeoAtlas地理小工具系列 (aliyun.com)