Echarts地图绘制(散点,色卡)
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官网: