echars省份地图（安徽地图地图加散点图）亮点展示 |
您所在的位置：网站首页 › 安徽省地图各县 › echars省份地图（安徽地图地图加散点图）亮点展示 |
echars省份地图（安徽地图地图加散点图）亮点展示
|
echars省份地图（安徽地图地图加散点图）亮点展示
一：需求讲解： 使用echars制作省份地图，显示城市名称，定位标点；点击地图区域，地图标点高亮。 （2）编写js部分 //在div中初始化地图 var myChart = echarts.init(document.getElementById('chart')); //自己造的数据，实际中找后台返回 var dataList =[{name: "黄山市", value: 896, cityPercentage: "10.92"}, {name: "宣城市", value: 862, cityPercentage: "10.51"}, {name: "滁州市", value: 779, cityPercentage: "9.50"}, {name: "六安市", value: 735, cityPercentage: "8.96"}, {name: "池州市", value: 631, cityPercentage: "7.69"}, {name: "合肥市", value: 617, cityPercentage: "7.52"}, {name: "阜阳市", value: 535, cityPercentage: "6.52"}, {name: "芜湖市", value: 485, cityPercentage: "5.91"}, {name: "马鞍山市", value: 480, cityPercentage: "5.85"}, {name: "安庆市", value: 464, cityPercentage: "5.66"}, {name: "蚌埠市", value: 429, cityPercentage: "5.23"}, {name: "亳州市", value: 377, cityPercentage: "4.60"}, {name: "铜陵市", value: 288, cityPercentage: "3.51"}, {name: "淮南市", value: 243, cityPercentage: "2.96"}, {name: "淮北市", value: 234, cityPercentage: "2.85"}, {name: "宿州市", value: 146, cityPercentage: "1.78"}] //散点坐标 var arr = [ {name: "蚌埠市", value: [117.003228,33.099667]}, {name: "合肥市", value: [116.953042,31.86119]}, {name: "芜湖市", value: [117.930051,31.226319]} , {name: "宣城市", value: [118.397995,30.495667]} , {name: "池州市", value: [117.139157,30.296037]} , {name: "亳州市", value: [116.002939,33.550338]} , {name: "铜陵市", value: [117.216576,30.909935]}, {name: "淮北市", value: [116.794664,33.971707]} , {name: "淮南市", value: [116.818329,32.347574]} , {name: "黄山市", value: [117.697325,29.909239]} , {name: "安庆市", value: [116.203551,30.50883]}, {name: "滁州市", value: [117.670264,32.533627]}, {name: "阜阳市", value: [115.250729,32.956969]}, {name: "宿州市", value: [117.134084,33.783891]}, {name: "马鞍山市", value: [118.507906,31.569362]}, {name: "六安市", value: [115.857676,31.552889]} ]; //渲染地图 var option = { tooltip: {}, //使用geo坐标 geo:{ map:'安徽',//安徽地图写‘安徽’ show:true, roam:false, selectedMode:'single', itemStyle:{ normal:{ borderColor: "#00FEFD", borderWidth: 1, areaColor:'#200076' }, emphasis:{ areaColor: '#5E34CE' //修改区域hover效果 } }, }, series : [ //第一个series 散点图 用于位置标点 { tooltip: { trigger: 'item', show:false, }, name:'scatter', type: 'scatter', coordinateSystem: 'geo',//使用坐标系 //自定义散点图片 symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAABS0lEQVQokU3SPUgWUBTG8V+vr4mDX4GGg7roErpqbg02SLgVIYLk0JAgOGWDIm4OQkGZqFMuUYNrY5AobYKTDkWLJH2IJviJIifOi97x3nPO8zz/c28UT37JcwsPMYw7rs4G5rGMv3FbaqrCFAZRg5/4l/fNWfwW0zgsogMDGMEPjONTPKIcD/ACz3GGmVBaxKOc/hRrqMRtfEcZOvEe9SFQQF9aepUN7XiDj3iHFnxNe+FsJJROsI1ebGVhfxac4yUmE1Q0NxaT0T720IbWzCIbu1Cbg0/DbiEf47IO31Lt+vmCP2jCTRzFpGAevu9jM9H/RjdWMJfUnqABnyPTbNI7wBBWUYFq7Gaue5k1gD0Oe0Htdcp/yJ3EYyw3sMd+llJloqQU9iP4GEaz4RgXiKGhGoRj6QuR6frfi4K7eIaeBLOTICLC+n96uARazFeiWsK6+QAAAABJRU5ErkJggg==', symbolSize: 13, data: arr, }, //第二个series 用于点击地图 使散点高亮（其实就是用一个较大的亮点覆盖住上面的散点） { tooltip: { trigger: 'item', show:false, }, name:'scatter', type: 'effectScatter', // 类型 coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo' symbol: 'circle', // 图形的样式 itemStyle: { color: '#07EFEE' }, //默认没有数据 就不会显示亮点 待点击后再塞入数据 data: [] }, //第三个series map地图 用于数据展示，点击事件 { tooltip: { trigger: 'item', show:true, backgroundColor:'rgba(0,0,0,0.6)', textStyle:{ color:'#FFFFFF', fontSize:13, fontWeight:'bold', }, //自定义tooltip数据 formatter(params) { return ` ${params.data.name} 接入数据量：${params.data.value} 占比：${params.data.cityPercentage}% `; }, }, type: 'map', name:'map', mapType:'安徽', coordinateSystem: 'geo', hoverable: true, dataRangeHoverLink: true, selectedMode : 'single', itemStyle:{ normal:{ borderColor: "#00FEFD", borderWidth: 1, areaColor:'#200076' }, emphasis:{ areaColor: '#5E34CE' //修改区域hover效果 } }, label:{ //显示各地方名称 normal:{ show:true, textStyle:{ color:'#FFB12A', fontSize:12, fontWeight:500 }, }, emphasis:{ show:true, textStyle:{ color:'#FFB12A', fontSize: 15, fontWeight:500 }, }, }, //渲染的数据 data: dataList }, ] }; //在div中渲染echars myChart.setOption(option); //点击事件 myChart.on('click', function (params) { //改变各市接入数据量分布占比 var cityName = params.name; //亮点的数据 var arrOf = {}; //亮点坐标 var arrs = [ {name: "蚌埠市", value: [117.003228,33.099667]}, {name: "合肥市", value: [116.953042,31.86119]}, {name: "芜湖市", value: [117.930051,31.226319]} , {name: "宣城市", value: [118.397995,30.495667]} , {name: "池州市", value: [117.139157,30.296037]} , {name: "亳州市", value: [116.002939,33.550338]} , {name: "铜陵市", value: [117.216576,30.909935]}, {name: "淮北市", value: [116.794664,33.971707]} , {name: "淮南市", value: [116.818329,32.347574]} , {name: "黄山市", value: [117.697325,29.909239]} , {name: "安庆市", value: [116.203551,30.50883]}, {name: "滁州市", value: [117.670264,32.533627]}, {name: "阜阳市", value: [115.250729,32.956969]}, {name: "宿州市", value: [117.134084,33.783891]}, {name: "马鞍山市", value: [118.507906,31.569362]}, {name: "六安市", value: [115.857676,31.552889]} ] let j = arrs.length for (let i = 0; i arrOf = arrs[i]; //设置亮点的大小 arrOf.symbolSize = 10 } } //点亮标点 点击修改对应的series数据 myChart.setOption({ series: [ //第一个series不变 {}, //第二个series数据 { data:[arrOf] }, //第三个series不变 {} ] }); //选择高亮 给地图点击区域显示高亮 myChart.dispatchAction({ type: "highlight", seriesName:'map', name:cityName }); });四：总结 echars十分灵活，图形间可以任意组合；能做出你想要的的任何图形。 |
二：主要准备工作 （1）：引入echars （2）：下载省份地图js（各省份免费下载地址） 注意：地图中给的文字坐标可跟展示有偏差，需自己去js中修改坐标（微调就行） 
三：代码示例（代码又臭又长，食用前做好心理准备） （1）写个html容器放echars【本文地址】
今日新闻 |
推荐新闻 |