引导线和散点图
地图上的地区文字或其他标示类的图层，区块面积相对太小，想放在地图之外，部分地区通过labelLine连接到对应的区块上。
数据格式
const geoCoordMap = { 江西: [115.892151, 28.676493], 河南: [113.665412, 34.757975], 四川: [104.065735, 30.659462], 重庆: [106.504962, 29.533155], 西藏: [91.132212, 29.660361], 贵州: [106.713478, 26.578343], 辽宁: [123.429096, 41.796767], 新疆: [87.617733, 43.792818], 山东: [117.000923, 36.675807], 上海: [121.472644, 31.231706], 澳門: [113.54909, 22.198951], 山西: [112.549248, 37.857014], 浙江: [120.153576, 30.287459], 海南: [110.33119, 20.031971], 福建: [119.306239, 26.075302], 青海: [101.778916, 36.623178], 宁夏: [106.278179, 38.46637], 湖北: [114.298572, 30.584355], 甘肃: [103.823557, 36.058039], 安徽: [117.283042, 31.86119], 台湾: [121.509062, 25.044332], 陕西: [108.948024, 34.263161], 广西: [108.320004, 22.82402], 天津: [117.190182, 39.125596], 云南: [102.712251, 25.040609], 黑龙江: [126.642464, 45.756967], 广东: [113.280637, 23.125178], 湖南: [112.982279, 28.19409], 河北: [114.502461, 38.045474], 内蒙古: [111.670801, 40.818311], 吉林: [125.3245, 43.886841], 江苏: [118.767413, 32.041544], 北京: [116.405285, 39.904989], 香港: [114.173355, 22.320048] }; var data = { 江西: Math.round(Math.random() * 1000), 河南: Math.round(Math.random() * 1000), 四川: Math.round(Math.random() * 1000), 重庆: Math.round(Math.random() * 1000), 西藏: Math.round(Math.random() * 1000), 贵州: Math.round(Math.random() * 1000), 辽宁: Math.round(Math.random() * 1000), 新疆: Math.round(Math.random() * 1000), 山东: Math.round(Math.random() * 1000), 山西: Math.round(Math.random() * 1000), 海南: Math.round(Math.random() * 1000), 福建: Math.round(Math.random() * 1000), 青海: Math.round(Math.random() * 1000), 宁夏: Math.round(Math.random() * 1000), 湖北: Math.round(Math.random() * 1000), 甘肃: Math.round(Math.random() * 1000), 安徽: Math.round(Math.random() * 1000), 陕西: Math.round(Math.random() * 1000), 广西: Math.round(Math.random() * 1000), 云南: Math.round(Math.random() * 1000), 黑龙江: Math.round(Math.random() * 1000), 湖南: Math.round(Math.random() * 1000), 河北: Math.round(Math.random() * 1000), 内蒙古: Math.round(Math.random() * 1000), 吉林: Math.round(Math.random() * 1000), //江苏北京香港上海澳門浙江台湾天津广东 没数据 } // 保存引导线末端的坐标 var linesEndCoords = { 山西: [geoCoordMap['山西'][0], geoCoordMap['山西'][1] + 8], 陕西: [geoCoordMap['陕西'][0], geoCoordMap['陕西'][1] + 16], 宁夏: [geoCoordMap['宁夏'][0], geoCoordMap['宁夏'][1] + 6], 甘肃: [geoCoordMap['甘肃'][0], geoCoordMap['甘肃'][1] + 16], 河北: [geoCoordMap['河北'][0] + 12, geoCoordMap['河北'][1]], 山东: [geoCoordMap['山东'][0] + 20, geoCoordMap['山东'][1]], 河南: [geoCoordMap['河南'][0] + 14, geoCoordMap['河南'][1]], 安徽: [geoCoordMap['安徽'][0] + 20, geoCoordMap['安徽'][1]], 湖北: [geoCoordMap['湖北'][0] + 14, geoCoordMap['湖北'][1]], 江西: [geoCoordMap['江西'][0] + 22, geoCoordMap['江西'][1]], 福建: [geoCoordMap['福建'][0] + 9, geoCoordMap['福建'][1]], 海南: [geoCoordMap['海南'][0] + 9, geoCoordMap['海南'][1]], 重庆: [geoCoordMap['重庆'][0] - 27, geoCoordMap['重庆'][1]], 云南: [geoCoordMap['云南'][0] - 10, geoCoordMap['云南'][1]], 广西: [geoCoordMap['广西'][0] - 30, geoCoordMap['广西'][1]], 贵州: [geoCoordMap['贵州'][0], geoCoordMap['贵州'][1] - 10], 湖南: [geoCoordMap['湖南'][0], geoCoordMap['湖南'][1] - 11], }
Echarts核心代码
var myChart = echarts.init(document.getElementById("container")); var option = { legend: {}, geo: { type: 'map', map: 'china', label: { show: false, }, itemStyle: { areaColor: 'rgba(3,110,241,1)', borderWidth: 1, borderColor: 'rgba(3,233,249,0.75)', // 地图边配色 //borderType: "dotted" }, emphasis: { label: { show: false, }, }, regions: [{ // 隐藏南海诸岛 name: '南海诸岛', itemStyle: { opacity: 0.6, label: { show: false, } } }] }, series: [ { // 含引导线的省份，用lines实现 type: 'lines', symbol: 'circle', symbolSize: [6, 4], label: { show: true, formatter: '{b} {c}人', textStyle: { color: "#fff" } }, lineStyle: { type: 'dotted', shadowBlur: 3, color: "#fff" }, data: dataLines(['山西', '陕西', '宁夏', '甘肃', '河北', '山东', '河南', '安徽', '湖北', '江西', '福建', '海南', '重庆', '云南', '广西', '贵州', '湖南'], data), }, { // 没有引导线的省份，用scatter实现 type: 'scatter', coordinateSystem: 'geo', symbolSize: 6, label: { show: true, position: 'bottom', formatter: function (params) { //console.log(params); return params.data.name + " " + params.data.value[2]; } }, itemStyle: { color: 'rgba(255, 255, 255,1)', }, data: dataScatter(['黑龙江', '吉林', '辽宁', '内蒙古', '四川', '青海', '新疆', '西藏'], data), }] }; //散点回调-单击事件; myChart.on('click', function (params) { console.log(params.name); }); //自适应浏览器; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); });
封装函数
// lines引导线数据和坐标 function dataLines(province, data) { var res = []; province.forEach(name => { res.push({ name: name, value: data[name], coords: [geoCoordMap[name], linesEndCoords[name]], }) }) return res; } // 散点图数据，其中value属性值为地理坐标和value拼接 function dataScatter(province, data) { var res = []; province.forEach(name => { res.push({ name: name, value: [geoCoordMap[name][0], geoCoordMap[name][1], data[name]] }) }) return res; }
@lockdata.cn
