echars 创建中国气泡地图和定位图表点

     function chinaMap() {// 1、初始化echarts示例mapvar map = echarts.init(document.getElementById('fans_map')); //（2）粉丝位置引入data数据var data = [{name: '海门', value: 500},{name: '鄂尔多斯', value: 18},{name: '招远', value: 2500},{name: '舟山', value: 1200},{name: '齐齐哈尔', value: 3200},{name: '赤峰', value: 20},{name: '青岛', value: 30},{name: '乳山', value: 40}]// 单个标点数据var data2 = [{name: '盐城', value: 20000,}]$.get('js/echarts/china.json',function(chinaJson){echarts.registerMap('china', chinaJson); // 注册地图//（3）引入城市坐标var geoCoordMap = {'海门':[121.15,31.89],'鄂尔多斯':[109.781327,39.608266],'招远':[120.38,37.35],'舟山':[122.207216,29.985295],'齐齐哈尔':[123.97,47.33],'盐城':[120.13,33.38],'赤峰':[118.87,42.28],'青岛':[120.33,36.07],'乳山':[121.52,36.89]}//（4）将数据和城市坐标对应上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.concat(data[i].value)});}}return res;};var max=200;// 动态设置气泡大小data.forEach(function (itemOpt) {if (itemOpt.value > max) {max = itemOpt.value;}// if (itemOpt.value < min) {//     min = itemOpt.value;// }}); var option = {geo: {type: 'map',map: 'china',itemStyle: {normal: {areaColor: '#efefef',//区域块默认颜色borderColor: '#fff'//区域边框颜色},emphasis: {areaColor: '#cccccc'// 鼠标经过区域}}},// 气泡大小visualMap: {show: false,min: 0,max: max,inRange: {symbolSize: [6, 40]}},//（1）series 的类型为散点图 scatterseries: [{name: 'pm2.5',            // series名称type: 'scatter',          // series图表类型coordinateSystem: 'geo',  // series坐标系类型data: convertData(data),  // series数据内容//控制显示文本label: {normal: {show: false,// formatter: function (val) {//             var area_content = '{a|' + val.data.code + '}' + '\n' + '{b|' + val.value[3] + '}';//             return area_content;//         },//让series 中的文字进行换行// rich: {//     a: {//         color: '#4801FF',//气泡上字体颜色//         fontWeight: 600,//     },//     b: {//         color: '#4801FF',//气泡上字体颜色//         fontFamily: 'Microsoft YaHei',//         fontSize: 14,//     }// },//富文本样式,就是上面的formatter中'{a|'和'{b|'},emphasis: {show: true},},//series样式itemStyle: {normal: {color: '#8e7bff'}}},{name: '点',type: 'scatter',coordinateSystem: 'geo',symbol: 'pin',symbolSize: 25,label: {normal: {show: true,position:'right',textStyle: {color: '#fff',fontSize: 14,},// color: itemOpt.color,formatter: function (val) { var area_content = '{a|'+ val.name + '}';return area_content;},//让series 中的文字进行换行rich: {a: {color: '#000',//气泡上字体颜色fontWeight: 600,},b: {color: '#4801FF',//气泡上字体颜色fontFamily: 'Microsoft YaHei',fontSize: 14,}},//}},itemStyle: {normal: {color: '#a11edd', //标志颜色}},zlevel: 6,data: convertData(data2)}]};map.setOption(option);})}chinaMap()

echars 创建中国气泡地图和定位图表点相关推荐

ECharts 创建中国气泡地图和定位图表点点击地区域高亮显示
ECharts 创建中国气泡地图和定位图表点点击地区域高亮显示 ECharts 官方案例: https://www.makeapie.com/editor.html?c=x_kEnG-Ggq 效果如 ...
Pyecharts Geo创建中国可视化地图
Pyecharts.Geo创建中国可视化地图安装需要的模块安装pyecharts 安装中国地图库绘制出地图第一步:导入中国地图第二步:进阶教学(干货满满!!!) Pyecharts做出来的图 ...
power bi 地图_如何使用Power BI创建地理地图-填充地图和气泡地图
power bi 地图该项目 (The project) This is the first article of a series dedicated to discovering geograp ...
如何使用谷歌地图和LightningChart创建地理空间地图图表？
LightningChart JS 是一款高性能的 JavaScript 图表工具,专注于性能密集型.实时可视化图表解决方案. LightningChart .JS | 下载试用(qun:740060 ...
转-iOS开发系列--地图与定位
来自: http://www.cnblogs.com/kenshincui/p/4125570.html#autoid-3-4-0 概览现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功 ...
地图与定位（五）高德地图服务一
序言: 高德地图是一款经常在苹果手机使用的地图平台.在国内iOS的地图服务都是由高德提供的.在上一节中,我们介绍了一下如何使用MapKit框架实现地图服务,以及如何调用了系统内置的地图应用.除了使用i ...
echarts关系图/力导向动态图(地图经纬度定位)
需求:项目要做一个动态展示服务器前置机间是否连通的界面. 先看下效果,分两种,一种带地图(经纬度),一种屏蔽地图显示: 这个是通过百度echarts的一个案列改造而来.下面附上官网地址.API地址.改 ...
根据经纬度在地图上定位
GPS经纬度坐标偏移问题.这个是由于中国要求对经纬度进行加密导致的,所以百度和Google的地图上都存在这个问题,即使用手持设备或者导航设备获取到的经纬度在地图上定位发现并不是对应的位置,而存在很大的 ...
pyecharts从入门到精通-地图专题Map-世界地图和中国城市地图
文章目录参考安装与查看pyecharts 地图实现-Geo 数据集查看读取数据生成中文国家名称国家中文和英文名称字典: 根据字典,生成国家中文名查看没有转换成功的国家中文有哪些过滤包含中 ...

echars 创建中国气泡地图和定位图表点

echars 创建中国气泡地图和定位图表点相关推荐

最新文章

热门文章