标签：name demo 地图 散点图 value itemStyle var data ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="main" style="height: 400px"></div>
<script src="../libs/echarts-5.3.3.js"></script>
<!--
1.导入了一个中国的 geo json
window.china_geojson = {}
-->
<script src="./geojson/china_geojson.js"></script>
<script>
window.onload = function () {
let mapName = '中国';
// 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
echarts.registerMap(mapName, { geoJSON: china_geojson });
let myChart = echarts.init(document.getElementById('main'));
var data = [
{ name: '北京', value: 199 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '山西', value: 81 },
{ name: '内蒙古', value: 47 },
{ name: '辽宁', value: 67 },
{ name: '吉林', value: 82 },
{ name: '黑龙江', value: 123 },
{ name: '上海', value: 154 },
{ name: '江苏', value: 102 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 109 },
{ name: '福建', value: 116 },
{ name: '江西', value: 91 },
{ name: '山东', value: 119 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 116 },
{ name: '湖南', value: 114 },
{ name: '重庆', value: 101 },
{ name: '四川', value: 125 },
{ name: '贵州', value: 62 },
{ name: '云南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陕西', value: 80 },
{ name: '甘肃', value: 56 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 18 },
{ name: '新疆', value: 120 },
{ name: '广东', value: 193 },
{ name: '广西', value: 59 },
{ name: '海南', value: 14 },
];
var geoCoordMap = {};
/*获取地图数据*/
myChart.showLoading();
// console.log(echarts.getMap(mapName));
// 1.先拿到地图的 geo json 对象
var mapFeatures = echarts.getMap(mapName).geoJson.features;
mapFeatures.forEach(function (v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;
});
myChart.hideLoading();
console.log('data=>', data);
console.log('geoCoordMap=>', geoCoordMap);
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: [...geoCoord, data[i].value],
});
}
}
console.log('res=>', res);
return res;
};
// 2.指定图表的配置项和数据
var option = {
tooltip: {}, // 提示框
// visualMap: { // 视觉映射组件
// left: "20%",
// seriesIndex: [0],
// inRange: {
// color: ["#04387b", "#467bc0"], // 蓝绿
// },
// },
geo: {
// 注册一个地理坐标系组件( 给散点图用 )
map: '中国',
roam: false,
label: { show: false },
aspectScale: 0.75, // 缩放地图
itemStyle: {
areaColor: '#023677',
borderColor: '#1180c7',
},
emphasis: {
itemStyle: { areaColor: '#4499d0' },
label: { color: 'white' },
},
},
series: [
{
name: '中国地图',
type: 'map',
map: '中国',
data, // 给地图填充数据
// 地图样式
itemStyle: {
areaColor: '#023677',
borderColor: '#1180c7',
},
emphasis: {
itemStyle: { areaColor: '#4499d0' },
label: { color: 'white' },
},
select: {
label: { color: 'white' },
itemStyle: { areaColor: '#4499d0' },
},
// 地图样式
},
{
name: '散点图充电桩',
type: 'effectScatter',
// 散点图使用的坐标系: geo定义的坐标系组件
geoIndex: 0,
coordinateSystem: 'geo', // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
itemStyle: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow',
},
tooltip: {
show: true,
trigger: 'item',
formatter: function (params) {
console.log(params);
var data = params.data;
return `${params.seriesName} <div style="margin:5px 0px;"/> ${data.name} ${data.value[2]}`;
},
},
},
],
};
myChart.setOption(option);
};
</script>
</body>
</html>
标签：name,
demo,
地图,
散点图,
value,
itemStyle,
var,
data,
ECharts
From： https://www.cnblogs.com/wx980416/p/17348576.html