echarts的散点图和中国地图配合使用
Posted 卿六
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts的散点图和中国地图配合使用相关的知识，希望对你有一定的参考价值。
热力图，我觉得也是叫散点图，我做的是分散在地图上面的点，主要效果如下：
图是在晚上抄的：
主要配置有几个:
第一个需要配置两个地图属性，即两个series:
series: [
// 地图,可以是数组，多个
label: // label就是你地图上展示的名字，比如四川，重庆等等
show: true, //显示省市名称
position: [1, 100], // 相对的百分比
fontSize: 12,
offset: [2, 0], // 是否对文字进行偏移，横向偏移2像素，纵向偏移0
align: "left", // 文字对齐方式
color: \'#fff\',
,
itemStyle:
areaColor: "#5470c6" // 地图图形颜色
,
geoIndex: 0, // 默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件
type: "map", // 地图类型
roam: true, // 整个地图能否缩放，拖拽
map: city, // 地图名字
zoom: 1.1, // 当前视角的缩放比例
top: "15%", // 距离顶部距离
scaleLimit: // 缩放级别限制
max: 9,
min: 1
,
, // 散点图配置
type: \'scatter\', // 地图类型
coordinateSystem: \'geo\', // 该系列所用的坐标系,geo表示使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
data: arr, // 数据
symbolSize: function (val) // 散点大小分块展示，calculateValue根据你的最大值除以20得出，最后整个散点大小都会在10-20像素
if (!val)
return
if (val.length === 0 || val.length < 3)
return
if (!val[2])
return
let value = val?.[2] / calculateValue
if (value < 12)
return 10
if (value < 14)
return 12
if (value < 16)
return 16
if (value < 18)
return 18
return 20
,
tooltip:
// 提示框
trigger: "item", // 触发类型
showDelay: 0, // 浮层显示延迟
transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
formatter: function (params) // 用来格式化图例文本
let data = = params;
return `$data?.name设备总数: $data?.value?.[2]`;
,
],
然后设置地理坐标系组件geo
geo:
scaleLimit:
max: 9,
min: 1
,
map: city,
roam: true,
tooltip:
show: true
,
itemStyle:
areaColor: "#5470c6" // 地图图形颜色
,
label:
show: true, //显示省市名称
position: [1, 100], // 相对的百分比
fontSize: 12,
offset: [2, 0],
align: "left",
color: \'#fff\',
,
,
还有一些其他配置，但是我不知道为什么不加这个配置就不得行:
tooltip:
// 提示框
trigger: "item",
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params)
let Count = 0;
arr.map(item =>
if(item.name === params.name)
Count = item?.value?.[2]
)
return `$params.name<br/>
个数: $Count`;
,
dataset:
source: data
,
完整代码：
export const chinaMapConfig = (configData) =>
const data, city, mapData = configData;
const arr = []
const calculatedArr = []; // 获取当前级别里面的设备数量数组
const foo = (max) =>
return max / 20
for (let i of data)
for (let j of mapData?.features)
if ((i?.Province && i?.Province?.indexOf(j.properties.name) !== -1)
|| (i?.City && i?.City?.indexOf(j.properties.name) !== -1)
|| (i?.District && i?.District?.indexOf(j.properties.name) !== -1))
arr.push( value: [...j.properties.center, i.Count], name: j.properties.name ) // 热力图数据
calculatedArr.push(i.Count)
calculatedArr.sort((a, b) => b - a)
const calculateValue = foo(calculatedArr[0])
const result =
tooltip:
// 提示框
trigger: "item",
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params)
let Count = 0;
arr.map(item =>
if(item.name === params.name)
Count = item?.value?.[2]
)
return `$params.name<br/>
个数: $Count`;
,
dataset:
source: data
,
series: [
// 地图,可以是数组，多个
label:
show: true, //显示省市名称
position: [1, 100], // 相对的百分比
fontSize: 12,
offset: [2, 0],
align: "left",
color: \'#fff\',
,
itemStyle:
areaColor: "#5470c6" // 地图图形颜色
,
geoIndex: 0,
type: "map",
roam: true, // 整个地图能否缩放，拖拽
map: city,
zoom: 1.1, // 当前视角的缩放比例
top: "15%", // 距离顶部距离
scaleLimit:
max: 9,
min: 1
,
, // 散点配置
type: \'scatter\',
coordinateSystem: \'geo\',
data: arr,
symbolSize: function (val)
if (!val)
return
if (val.length === 0 || val.length < 3)
return
if (!val[2])
return
let value = val?.[2] / calculateValue
if (value < 12)
return 10
if (value < 14)
return 12
if (value < 16)
return 16
if (value < 18)
return 18
return 20
,
tooltip:
// 提示框
trigger: "item",
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params)
let data = = params;
return `$data?.name设备总数: $data?.value?.[2]`;
,
],
geo:
scaleLimit:
max: 9,
min: 1
,
map: city,
roam: true,
tooltip:
show: true
,
itemStyle:
areaColor: "#5470c6" // 地图图形颜色
,
label:
show: true, //显示省市名称
position: [1, 100], // 相对的百分比
fontSize: 12,
offset: [2, 0],
align: "left",
color: \'#fff\',
,
,
;
return result
;
行百里者半九十
如何获得一个散点矩阵，仅由具有 1:1 线的散点图和良好的轴标签组成？
【中文标题】如何获得一个散点矩阵，仅由具有 1:1 线的散点图和良好的轴标签组成？【英文标题】：How to get a scatter matrix consisting of just scatterplots with a 1:1 line, and good axis labels? 【发布时间】：2021-07-16 12:05:01 【问题描述】：我想要一个只有散点图的矩阵，其中存在 1:1 线。 数据结构如下：
bulk_SIC_25 <- data.frame(soilsample$bulk_SIC_scheibler_25,soilsample$bulk_SIC_LECO.CBLB_25,soilsample$bulk_SIC_RE6_25)
colnames(bulk_SIC_25)<-c("SIC_scheibler_25","SIC_LECO-CBLB_25","SIC_RE6_25")
dataframe里面的数据是：
输入（bulk_SIC_25） 结构（列表（SIC_scheibler_25 = c（8.292、9.648、9.072、6.084、 10.944、12.48、4.368、6.732、5.592、9.024、8.7、9.48、9.588、 3.432, NA, 15.72),
SIC_LECO-CBLB_25= c(6.9, 9.5, 8, 6.6, 11.1, 13, 不适用, 7, 5.5, 8.95, 9.14, 9.6, 9.2, 3.5, 不适用, 不适用), SIC_RE6_25 = c(10.4, 10.7、11.3、8.6、13.2、15.5、6.3、9.6、7.6、10.5、10.7、11.3、 11.4, 5.1, 17.2, 17.9)), class= "data.frame", row.names = c(NA, -16L))
pairs 函数生成一个漂亮的矩阵，其中只有散点图和可见的 x/y 轴和变量名称： example pairs
pairs(bulk_SIC_25, labels=colnames(bulk_SIC_25),gap=0.5, main=" Total Carbon in bulk soil ",lower.panel=NULL, cex.labels=1.5 ,pch=21, bg="Black")`
但是，我无法更改点的大小，也无法添加 1:1 的线。 因此，我切换到带有内部标签的 ggpairs：
Example ggpairs internal labels 代码：
ggpairs(data=soilsample, columns = c("bulk_SIC_scheibler_25","bulk_SIC_LECO.CBLB_25","bulk_SIC_RE6_25"), upper="blank",axisLabels = "internal")+ggtitle(label="Soil Organic Carbon bulk soil")+theme_bw(base_size=15)+geom_abline(intercept=0,slope=1)+labs(x="g C/ kg soil", y= "g C / kg soil")+geom_point(size=3)+ theme(plot.title = element_text(hjust = 0.5))
但是，如您所见，内部轴标签的网格线与散点图不匹配，因此散点图很难阅读。
我试过了：
limitRangediag <- function(data, mapping, ...)
ggplot(data = data, mapping = mapping, ...) +
scale_y_continuous(limits = c(5, 16)) +
scale_x_continuous(limits = c(5, 16))
ggpairs(data=soilsample, columns = c("bulk_SIC_scheibler_25","bulk_SIC_LECO.CBLB_25","bulk_SIC_RE6_25"), upper="blank",lower = list(continuous = limitRange),diag=list(continous=limitRangediag),axisLabels = "internal")+ggtitle(label="Soil Organic Carbon bulk soil")+theme_bw(base_size=15)+geom_abline(intercept=0,slope=1)+labs(x="g C/ kg soil", y= "g C / kg soil")+geom_point(size=3)+
theme(plot.title = element_text(hjust = 0.5))
我知道我在编写函数时做错了，但我对此非常缺乏经验，也不知道我做错了什么。
我也可以放心地将外部标签放在 ggpairs 中的正确位置（因此跳过第一个空白行，并将标签放在图本身之上），但我不知道这样做......： example ggpairs external labels
ggpairs(data=df, columns = c("bulk_SIC_scheibler_25","bulk_SIC_LECO.CBLB_25","bulk_SIC_RE6_25"), upper="blank",diag="blank",axisLabels = "shown")+ggtitle(label="Soil Organic Carbon bulk soil")+theme_bw(base_size=15)+geom_abline(intercept=0,slope=1)+labs(x="g C/ kg soil", y= "g C / kg soil")+geom_point(size=3)+ theme(plot.title = element_text(hjust = 0.5))
如果有人可以帮助我修复这 3 个选项中的一个，以获得具有 1:1 线和可调整大小的点以及可读轴标签的散点图矩阵，我将不胜感激！！
【问题讨论】：
使用dput() 显示您的数据。我认为没有人可以在没有看到的情况下发表评论。
好点！我显然是这里的新手 ;-) 我会用这些信息更新我的帖子！
【参考方案1】：
在pairs() 中，您可以将panel= 参数（默认为points()）指定为包含您想要的任何内容的函数，例如对abline() 的调用（在您的情况下，您将使用@ 987654327@，因为您希望下面板为 NULL）
cex 参数（传递给面板函数）将改变磅值。
pairs(mtcars[,1:5],
panel = function(...) points(...); abline(a=0,b=1,lty=2,col="red") ,
cex=4,
gap=0 ## you didn't ask for this but I prefer it
)
在这个特定的示例中，1:1 线并未出现在每个面板中，但原则上它存在（您必须设置 x、y 限制以确保它与面板区域相交）
【讨论】：
这个建议非常有效，非常感谢！！以上是关于echarts的散点图和中国地图配合使用的主要内容，如果未能解决你的问题，请参考以下文章
echarts中当出现散点图和线图和地图结合时如何去实现散点消失线跟着消失
如何获得一个散点矩阵，仅由具有 1:1 线的散点图和良好的轴标签组成？
R语言使用plot函数和lines函数可视化并排的散点图和折线图（line charts）如果把从左到右移动的散点图中的点连接起来，你就有了一个线图