echarts添加地图散点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>地图下钻</title><style>body {margin: 0 auto;}#main {position: fixed;left: 0;right: 0;top: 0;bottom: 0;}</style>
</head><body><div id="main"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script><script>let publicUrl = 'https://geo.datav.aliyun.com/areas_v2/bound/';async function initChart() {let chart = echarts.init(document.getElementById('main'));let alladcode = await getGeoJson('all.json')let chinaGeoJson = await getGeoJson('100000_full.json')initEcharts(chinaGeoJson, '中国', chart, alladcode)}initChart();// 每个地区的数据let mapData = [{name: "河南省",value: 1000},{name: "山东省",value: 500},{name: "安徽省",value: 700},{name: "山西省",value: 200},{name: "湖南省",value: 600},{name: "四川省",value: 1600}]//echarts绘图function initEcharts(geoJson, name, chart, alladcode) {//获取当前显示地图下方地市的坐标点数据； 用于气泡显示let geoCoordMap = {};// 获取地区详细信息let mapFeatures = geoJson.features;// 遍历获取每个地区的经纬度mapFeatures.forEach(function (v, i) {// 获取当前地区名let name = v.properties.name;if (name) {// 获取当前地区的经纬度geoCoordMap[name] = v.properties.center;}});//将data数据进入方法，取需要的参数； 用于气泡显示let convertData = function (data) {var res = [];data.forEach(item => {// 获取当前省份的经纬度坐标let geoCoord = geoCoordMap[item.name];if (geoCoord) {res.push({// name 表示地区名称name: item.name,// value数据格式为：[113.665412, 34.757975, '200']value: geoCoord.concat(item.value)});}})return res;};echarts.registerMap(name, geoJson);var option = {title: {text: name,left: 'center',},//鼠标经过展示数据方法tooltip: {triggerOn: "mousemove",formatter: function (params) {if (isNaN(params.value)) {params.value = 0}if (params.seriesName === '散点') {params.value = params.data.value[2]}var html = '<span>' + params.name + '：</span><br/>'html += '<span>值：' + params.value + '</span><br/>'return html},backgroundColor: 'rgba(29, 38, 71)',// 额外附加的阴影extraCssText: 'box-shadow:0 0 4px rgba(11, 19, 43,0.8)',},geo: {show: true,top: '15%',map: name,label: {normal: {show: false},emphasis: {show: false,color: "#fff",}},roam: true,itemStyle: {normal: {areaColor: '#116bda',borderColor: '#fff',},emphasis: {areaColor: '#113cda',}}},//进行气泡标点series: [{type: 'map',map: mapData,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077',},emphasis: {areaColor: '#2B91B7'}},animation: true,data: mapData},{name: '散点', // 自定义名称type: 'effectScatter', // scatter  effectScatter  coordinateSystem: 'geo', // 设置坐标系类型data: convertData(mapData), // 设置散点位置和数据symbolSize: function (val) { // 设置散点大小return 15},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true, // 是否显示鼠标悬浮动画label: {// 静态显示时的样式normal: {show: true, // 显示地区名称formatter: function (data) { // 显示模板return data.value[2]},position: 'bottom', // 显示位置},// 鼠标悬浮上去的样式emphasis: {show: true, // 显示地区名称color: "red",},},itemStyle: {normal: {color: function (res) {let value = res.value[2]//根据value值对标点进行不同颜色显示if (value < 500) {return '#ff3859'} else if (value < 1000) {return '#4ed7fa'} else if (value < 1500) {return '#fac531'} else {return '#01ff5b'}},shadowBlur: 10,},// 鼠标悬浮上去的样式emphasis: {color: "red",},},zlevel: 3}]};chart.setOption(option);// 解绑click事件chart.off("click");//给地图添加监听事件chart.on('click', async params => {// 获取当前点击的地图codelet clickRegion = alladcode.find(areaJson => areaJson.name === params.name);// 获取要获取地图的json名称let regionJsonName = clickRegion.adcode + '_full.json'// 获取点击的区域名称let cityName = params.name// 判断当前点击的地图等级,如果是区级，则再次点击时重新回到全国的数据if (clickRegion.level === 'district') {regionJsonName = '100000_full.json'cityName = '中国'}// 根据地图code获取getGeoJson(regionJsonName).then((result) => {initEcharts(result, cityName, chart, alladcode)})})}//获取地图json数据async function getGeoJson(jsonName) {return await $.get(publicUrl + jsonName)}</script>
</body></html>

echarts添加地图散点相关推荐

echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map var data = [{name: '郑州',v ...
echarts中国地图散点实现自定义动画
前言:文章不知为何突然审核不通过,现在重新编辑再次分享给大伙,天下之大,能帮一点是一点 github链接:svg-chinamap-scatter-echart/echartcomponent.vue ...
vue搭配echarts做地图散点效果以及飞机迁徙图
记录一下自己vue项目中做的echarts地图分布散点效果 1.项目安装echarts 在已经生成的vue项目根目录运行安装echarts: npm install echarts -S 2.百度地图 ...
echarts 世界地图标点_ECharts添加地图标点(笔记）
ECharts添加地图标点(笔记) 如图: 实例html: var dom = document.getElementById("container"); var myChart ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
echarts+高德地图绘制散点+流线图
1.安装echarts高德地图插件 npm install echarts-extension-amap –save 2.在高德开放平台注册账号并申请Key 1. 登陆之后,在进入「应用管理」页面「 ...
php 如何实现图表联动,echarts实现地图定时切换散点与多图表级联联动详解
1. 摘要最近做项目遇到个统计相关需求,一个页面中大概四个或更多图形统计,百度地图.饼图.柱状图.线型图.百度地图上显示所有店面在全国各地大概位置,目前暂定每省一个,在地图上显示散点.如默认显示郑 ...
vue+openlayer+echarts 在地图点位上添加柱状图
** vue+openlayer+echarts 给地图点位添加柱状图 ** 重点在方法addColumnChart()里,三步实现在网上百度了很多相关文章,最终都无疾而终,只能硬着头皮自己摸索,好 ...
echarts地图散点热力图1
echarts地图散点热力图 <!--https:// ...

echarts添加地图散点

echarts添加地图散点相关推荐

最新文章

热门文章