首页 技术 正文
技术 2022年11月16日
0 收藏 885 点赞 2,431 浏览 1563 个字

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

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

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

提供geoJSON数据的网站:http://datav.aliyun.com/tools/atlas/

该网站提供了中国省,市,县,地区的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官网: http://www.echartsjs.com/index.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,965
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,486
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,331
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,114
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,747
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,781