ECharts绘制地图分布，可自定义城市散点

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>作业运行</title><script src="js/echarts.min.js"></script><script src="js/china.js"></script></head><body><div  data-role="page" id="china-map" style="height: 700%"></div><script>var myChart = echarts.init(document.getElementById('china-map'));var geoCoordMap = {//自定义城市坐标"青岛":[120.33,36.07],"厦门":[118.1,24.46],"宁波":[121.56,29.86],"深圳":[114.07,22.62],"大连":[121.62,38.92]};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;};option = {backgroundColor: '#BBFFFF',title : {text: '异常分布',x:'center'},tooltip: {trigger: 'item',  formatter: function(params) {  var res = params.name+'<br/>';  var myseries = option.series;  if (convertData) {for (var i = 0; i < myseries.length-1; i++) {for(var j=0;j<myseries[i].data.length;j++) {  if(myseries[i].data[j].name==params.name){res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>'; }}}}else {for (var i = 0; i < myseries.length; i++) {  for(var j=0;j<myseries[i].data.length;j++){  if(myseries[i].data[j].name==params.name){  res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';  }  }  } }  return res;  }  },legend: {orient: 'vertical',x:'left',data:['超时','失败','运行中']},dataRange: {min: 0,max: 30,x: 'left',y: 'bottom',color:['red','orange','yellow','green'],text:['高','低'],calculable : true},toolbox: {show: true,orient : 'vertical',x: 'right',y: 'center',feature : {mark : {show: true},dataView : {show: true, readOnly: false},restore : {show: true},saveAsImage : {show: true}}},roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},geo: {map: 'china',label: {emphasis: {show: true}},itemStyle: {normal: {areaColor: '#FFE4CA',borderColor: '#84C1FF',borderWidth: 0.8},emphasis: {areaColor: '#FFC78E'}}},series : [{name: '超时',type: 'map',mapType: 'china',roam: false,itemStyle:{normal:{label:{show:false}},emphasis:{label:{show:true}}},data:[{name: '广东',value: 4},{name: '黑龙江',value: 1},{name: '湖南',value: 3}]},{name: '失败',type: 'map',mapType: 'china',itemStyle:{normal:{label: {show: false}},emphasis:{label:{show:true}}},data:[{name: '安徽',value: 11},{name: '北京',value: 1},{name: '大连',value: 13},{name: '福建',value: 6},{name: '甘肃',value: 1},{name: '广东',value: 4},{name: '广西',value: 10},{name: '贵州',value: 9},{name: '海南',value: 4},{name: '河北',value: 1},{name: '河南',value: 18},{name: '黑龙江',value: 1},{name: '湖北',value: 3},{name: '湖南',value: 18},{name: '吉林',value: 16},{name: '江苏',value: 16},{name: '江西',value: 24},{name: '辽宁',value: 1},{name: '内蒙古',value: 18},{name: '宁波',value: 12},{name: '宁夏',value: 1},{name: '青岛',value: 2},{name: '青海',value: 23},{name: '山东',value: 14},{name: '山西',value: 8},{name: '陕西',value: 13},{name: '上海',value: 10},{name: '深圳',value: 4},{name: '四川',value: 8},{name: '天津',value: 28},{name: '西藏',value: 2},{name: '厦门',value: 5},{name: '新疆',value: 4},{name: '云南',value: 10},{name: '浙江',value: 13},{name: '重庆',value: 18}],},{name: '运行中',type: 'map',mapType: 'china',itemStyle:{normal:{label:{show:false}},emphasis:{label:{show:true}}},data:[{name: "青岛", value: 1},{name: "厦门", value: 23},{name: "宁波", value: 12},{name: "深圳", value: 4},{name: "大连", value: 13},]},{name: '计划单列市',type: 'effectScatter',//影响散点coordinateSystem: 'geo',symbolSize: 12,showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {color: '#c60fff',formatter: '{b}',position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '',shadowBlur: 10,shadowColor: '#333'},},data: convertData([{name: "青岛"},{name: "厦门"},{name: "宁波"},{name: "深圳"},{name: "大连"},]),}]};myChart.setOption(option); myChart.on('mouseover', function (params) {var dataIndex = params.dataIndex;console.log(params);});window.addEventListener("resize",function(){myChart.resize();});</script></body>
</html>

ECharts绘制地图分布，可自定义城市散点相关推荐

Vue 使用 Apache Echarts 绘制地图（拓展篇）
前言根据大家的私信.留言,还是决定对地图这块的东西进行拓展讲解一下,希望大家能够真正了解.使用.绘制自己想要的地图效果,让大家彻底弄懂Echarts地图,涉及绘制原理.行政区划.SVG地图.地图打点 ...
echarts绘制地图-china.json
分为两种一种是使用echarts里面的china.json渲染城市一种是在data的 services写数据中国地图下面是世界地图效果图 option里面配置了弹窗,设置了弹窗的样式配置r ...
echarts 绘制地图设置其中某些板块高亮（颜色）
问题描述:当我们用echarts绘制了一个地图,可能需要某个位置高亮. 如下图: 其实有个属性,当我们传入的data数据里面加一行就可以改变它是否选中了.具体代码如下. 当selected:true ...
ECharts 绘制地图飞线
以官方示例为起点进行修改: https://www.echartsjs.com/gallery/editor.html?c=scatter-map 若自行绘制html进行尝试,请记得引入中国地图或者世 ...
echarts 3d地图_用Echarts绘制地图-绘制省级地图
公司有一个大数据平台的需求,图表什么的都还好实现.主要就是当中的地图效果我没有做过所以耗费了我一些时间去查资料,万幸还是实现出来了,当然只是一个特别基础的图层没有散点没有下钻,但后面会逐步写出来,所以 ...
vue使用echarts绘制地图
由于vue-echarts网上能找到的资源太少了,鼓捣了好久地图也没出来,最后还是放弃了,还是用echarts吧.直接贴代码 <template><div class="& ...
echarts 绘制地图飞机路线
Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLine 和 markPoint.如果要实现点数据或者线数据的可视化,可以使用在地理坐标系组件上的散点图和线图. 本来要画地图 ...
echarts 绘制地图柱状图
现在的地图代码是用的江苏省的json,如果需要绘制别的地区,或者中国地图需要下载指定的json进行替换,如果你找不到json下载,可以私信我. 成果图代码下面的代码中有详情的每个参数的注释,文章中 ...
echarts中国地图实现阴影效果自定义设置
这要实现的重点就是地图添加底部阴影的效果,原理就是在原有的地图下面再添加一个地图,下面是代码: html <div id="myEchart" ref="myEc ...

ECharts绘制地图分布，可自定义城市散点

ECharts绘制地图分布，可自定义城市散点相关推荐

最新文章

热门文章