echarts地图的运用免费获取乡镇json数据

最新推荐文章于 2024-08-05 05:00:00 发布

hammer1010

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量1.7k

点赞数 4

分类专栏： js Echarts 文章标签： echarts地图的运用

本文链接：https://blog.csdn.net/hammer1010/article/details/97000337

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Echarts

2 篇文章 0 订阅

订阅专栏

没有特别的幸运，那么就加倍的努力！！！

效果图
在这里插入图片描述

示例1；中国地图 vue

//首先安装echarts
cnpm install echarts --save-dev

组件代码

<template>
  <div>
      <div id="chart_example"></div>
  </div>
</template>

<script>
  // 首先要 cnpm install echarts
  import echarts from 'echarts'
  import '../../../node_modules/echarts/map/js/china.js'

  export default {
    mounted() {
      let myChart = echarts.init(document.getElementById('chart_example'));

      /**
       * 中国地图
       * 必须引入china.js
       * https://www.cnblogs.com/ldlx-mars/p/9242250.html
       * map配置
       * https://echarts.baidu.com/option.html#series-map.map
       * 高亮颜色
       * https://www.cnblogs.com/xianwen/p/6045454.html
       */
      let option = {
        series: [{
          type: 'map',
          // mapType: 'china'// mapType或者map都可以
          map: 'china',
        }]
      };


      myChart.setOption(option);

       this.init() //让echarts窗口自适应

    },

    methods:{
      init() {
        const self = this;//因为箭头函数会改变this指向，指向windows。所以先把this保存
        setTimeout(() => {
          window.onresize = function() {
              self.chart = echarts.init(document.getElementById('chart_example'));
              self.chart.resize();
          }
        },20)
      }

    }
  }
</script>

<style scoped>
  #chart_example {
    width: 1200px;
    height: 700px;
    /* border: 1px solid blue; */
  }
</style>

示例2，省地图 jq

在这里插入图片描述

echarts地图需引入基本文件

echarts.js文件
中国地图js文件
全国json数据（可以按需引入，减少代码冗余），这一步进行了收集，特别是浙江这块数据比较齐全
下载路径：

https://github.com/15171222839/echartsMap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #main{
      width:500px;
      height:600px;
      border:1px solid grey;
      margin:100px auto;
    }
  </style>
</head>
<body>
  <div id="main"></div>



    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script src="js/china-main-city-map.js"></script>
    <script>
    var data1 = [{name:"杭州市",value:30,selected:true,itemStyle:{borderColor:"red"}},{name:"宁波市",value:70},{name:"台州市",value:40},{name:"舟山市", value:10},{name:"湖州市", value:100},{name:"嘉兴市", value:110},{name:"绍兴市", value:80},{name:"金华市", value:50},{name:"丽水市", value:80},{name:"温州市", value:66},{name:"衢州市", value:50}];

    function echartsMap(data1){
        $.get('json/china-main-city/330000.json', function (dataJson) {
          echarts.registerMap('mapName', dataJson);
          var chart = echarts.init(document.getElementById('main'));
          chart.setOption({
            tooltip: {
                show: true,
                formatter:function(e){
                  return e.data.name+"<br/>"+e.data.value+"万元";
                }
              },
              series: [{
                center: [120.257238, 29.165918],
                aspectScale:0.75,
                itemStyle:{//图形样式。
                  normal:{label:{show:true}},//显示地图地区名
                  areaColor: 'grey',
                    emphasis: {//选中状态下   高亮
                      areaColor: 'rgba(12,66,121,0.5)',
                      color:"green"
                  },
                  borderColor:"white",
                },
                data:data1,
                roam:true,
                  type: 'map',
                  map: 'mapName'
              }]
          });
      });
    }
    echartsMap(data1);   
    </script>
  
</body>
</html>