欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Echarts地图绘制(散点,色卡)

程序员文章站 2022-06-29 12:35:15
echarts绘制地图时,提供了js内部注册,也提供了json数据手动注册,这两种都可以绘制对应地图,但有一点不同的是,js内部只注册了中国地图和世界地图,而json数据提供了世界,中国,中国城市的数据 手动注册:引入json数据,使用 echarts.registerMap('china', ch ......

    echarts绘制地图时,提供了js内部注册,也提供了json数据手动注册,这两种都可以绘制对应地图,但有一点不同的是,js内部只注册了中国地图和世界地图,而json数据提供了世界,中国,中国城市的数据

   手动注册:引入json数据,使用 echarts.registermap('china', chinajson);就可以绘制中国地图了

   由于echarts提供的geojson数据过少,当我们想绘制中国城市甚至是城市的每个区的时候,我们就需要自定义geojson数据

   提供geojson数据的网站:

   该网站提供了中国省,市,县,地区的geojson数据,这样我们就可以自定义绘制对应地图了

   

   散点

   绘制地图完成后,可以在上面设置散点图,根据echarts的配置进行设置

   backgroundcolor=“#ccc” // 地图的背景颜色

   geo = {  // 地图相关配置

      map: “china” ,  //  “china”是注册地图时使用的名称

     roam: true,  // 地图是否可以缩放

    itemstyle: {   // 地图区域的配置

        normal: {

              areacolor: '#323c48',  // 绘制的每一个轮廓的背景颜色

              bordercolor: '#111'

        },

        emphasis: {

          areacolor: '#2a333d',// 鼠标移到区域时的背景颜色

       },

      }

     ...  // 更多配置可以查看官网

    };  

   visualmap = {  // 视觉映射配置

      show: true,  // 颜色渐变条是否显示

     color: ["", "", ""],  // 渐变的颜色集合

     textstyle: {  // 地图上的样式,比如,字体颜色,大小

        color: #fff, 

    },

   };

   series = [{

      type: "scatter" ,  // 类型为散点图

      coordinatesystem: 'geo',   // 使用该坐标系,映射到地图上

      data: [[121.221, 23.43, 12]], //散点的数据

      symbolsize: 5,  // 散点的大小

   }];

 

  色卡

    绘制地图完成后,可以在上面根据绘制的区域进行着色,根据echarts的配置进行设置

      background='#ccc';  // 地图背景颜色

      visualmap={

         type: 'continuous',  // 颜色渐变条为连续还是分段 (continuous 或 piecewise)

         min: 0,   // 渐变的最小值

        max: 100,  // 渐变的最大值

       show: true,  // 是否展示渐变条

       inrange:  {  // 渐变颜色范围

         color: ['#00fa9a', '#00ff7f', '#7fff00' ],

      },

      textstyle: {  // 地图上的样式

        color: '#fff',

    };

    series=[{

       type: 'map',  // 类型为地图

       map: 'china',   // 该值为注册地图时的名称

       roam: true,  // 允许地图缩放

       data: [{ name: '北京', value: 10 }], // 每一个数据的name与注册地图的geojson里的name对应,不然映射不了

      itemstyle: {   // 地图区域的配置

        normal: {

              areacolor: '#323c48',  // 绘制的每一个轮廓的背景颜色

              bordercolor: '#111'

        },

        emphasis: {

          areacolor: '#2a333d',// 鼠标移到区域时的背景颜色

       },

    }];

 

    更多配置请查看echarts官网: