echarts生成地图入门参考案列（新手食用）

最新推荐文章于 2024-12-07 15:05:20 发布

Chevsky

最新推荐文章于 2024-12-07 15:05:20 发布

阅读量411

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_59116575/article/details/132076087

版权

1.echarts生成地图需要对应的json文件配置，目前常用的阿里云可视化

可以根据鼠标选择行政区域==>最低可以到县级行政区。选择完毕之后可以点击右侧选择你想要的数据格式。这里演示是直接下载方式。

下载之后是这样的

2 . 导入并注册地图挂载
fetch是异步引入所以需要在成功的 .then回调内进行操作确保不会出现错误。

mounted(){
      fetch('./china.json')
          .then(response => response.json())
          .then(geoJson => {
            this.chinaJson = geoJson; // 将数据赋值给chinaJson变量
          this.isChinaJsonLoaded = true; // 标记china.json数据已加载
          this.initECharts(); // 在获取到数据后再执行ECharts初始化
      });
     
    }

methods 中根据需求配置初始化并同样在引入后进行初始化
以下是完整示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script src="./china.json"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="message">
      <div class="echarts">
    </div>
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      chinaJson:''
    },
    methods:{
      initECharts() {
        if (this.isChinaJsonLoaded) {
          echarts.registerMap('china', this.chinaJson);
          const echartsInstance = echarts.init(document.querySelector('.echarts'));
          echartsInstance.setOption({
            title: {
              text: 'ECharts Map Example',
              left: 'center',
            },
            dataRange:{ 
            //映射图列
            	min:0,
            	max:1000,
            	text:['高','低'],
            	realtime:true, // 开启实时更新
            	calculable:true, //开启拖动
            	color:['orangered','yellow','green']
            },
            tooltip: {
              show: true,
              trigger: 'item', // 触发类型，item 表示图形触发
              formatter: function (params) {
                // 返回提示信息的格式
                return params.name + ': ' + params.value;
              },
            },
            series: [
              {
                type: 'map',
                map: 'china', //对应registerMap 注册名称
                roam: true, // 鼠标进行拖拽和缩放操作
                label: {
                  show: true,
                  textStyle: {
                    color: '#333', // 标签文本颜色
                    fontSize: 12, // 标签文本字体大小
                  },
                },
                itemStyle: {
                  emphasis: {  //鼠标悬浮样式
                    show:false,
                    areaColor: '#d0d0d0',// 鼠标悬停时的地图区域颜色
                  },
                },
                data:[ //name要对应json文件里面的名称
                  { name: '北京市', value: 800 }, 
                  { name: '天津市', value: 750 },
                  { name: '河北省', value: 680 },
                  { name: '山西省', value: 600 },
                  { name: '内蒙古自治区', value: 550 },
                  { name: '辽宁省', value: 720 },
                  { name: '吉林省', value: 520 },
                  { name: '黑龙江省', value: 590 },
                  { name: '上海市', value: 850 },
                  { name: '江苏省', value: 790 },
                  { name: '浙江省', value: 720 },
                  { name: '安徽省', value: 650 },
                  { name: '福建省', value: 720 },
                  { name: '江西省', value: 550 },
                  { name: '山东省', value: 690 },
                  { name: '河南省', value: 680 },
                  { name: '湖北省', value: 720 },
                  { name: '湖南省', value: 620 },
                  { name: '广东省', value: 780 },
                  { name: '广西壮族自治区', value: 590 },
                  { name: '海南省', value: 420 },
                  { name: '重庆市', value: 600 },
                  { name: '四川省', value: 730 },
                  { name: '贵州省', value: 500 },
                  { name: '云南省', value: 550 },
                  { name: '西藏自治区', value: 300 },
                  { name: '陕西省', value: 650 },
                  { name: '甘肃省', value: 490 },
                  { name: '青海省', value: 400 },
                  { name: '宁夏回族自治区', value: 360 },
                  { name: '新疆维吾尔自治区', value: 520 },
                  { name: '台湾省', value: 600 },
                  { name: '香港特别行政区', value: 450 },
                  { name: '澳门特别行政区', value: 380 },
                ]
              },
  
            ],
          });
        }
      }
    },
    mounted(){
      fetch('./china.json')
          .then(response => response.json())
          .then(geoJson => {
            this.chinaJson = geoJson; // 将数据赋值给chinaJson变量
          this.isChinaJsonLoaded = true; // 标记china.json数据已加载
          this.initECharts(); // 在获取到数据后再执行ECharts初始化
      });
      if (this.chinaJson) {
        echarts.registerMap('china', this.chinaJson); //注册
        const echartsInstance = echarts.init(document.querySelector('.echarts'));
          echartsInstance.setOption({
            title: {
              text: 'ECharts Map Example',
              left: 'center',
            },
            tooltip: {},
            series: [
              {
                type: 'map',
                map: 'china',
                roam: true,
                label: {
                  show: true,
                },
                itemStyle: {
                  emphasis: {
                    areaColor: '#d0d0d0',
                  },
                },
              },
            ],
          });
        }

    }
  })

</script>
<style>
  body{
    padding: 0;
    margin: 0;
    /* background-color: rgba(95, 209, 184, 0.801); */
  }
  .echarts{
    box-shadow: 0 4px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    background-color: white;
    width: 90vw;
    height: 90vh;
    margin: 10px auto;

  }
</style>
</html>

3.注意点： series 中data中的数据的name需要与json文件中的行政区域名称相同一字不差。