echarts 中国地图，tooltip，legend同时显示多组数据
此echarts图只是用于示例，记录在此，只是为方便以后可能需要用到做参考。具体数据部分，部分代码不够严整，就不在考虑范围了，毕竟这种较为复杂的图形用的也不多。
// 地图数据
var chinaDataURL = “/asset/get/s/data-1517645039291-B1vgpymUz.json”;
//坐标
var geoCoordMap = {
‘上海’: [119.1803, 31.2891],
“福建”: [119.4543, 25.9222],
“重庆”: [108.384366, 30.439702],
‘北京’: [116.4551, 40.2539],
“辽宁”: [123.1238, 42.1216],
“河北”: [114.4995, 38.1006],
“天津”: [117.4219, 39.4189],
“山西”: [112.3352, 37.9413],
“陕西”: [109.1162, 34.2004],
“甘肃”: [103.5901, 36.3043],
“宁夏”: [106.3586, 38.1775],
“青海”: [101.4038, 36.8207],
“新疆”: [87.9236, 43.5883],
“西藏”: [91.11, 29.97],
“四川”: [103.9526, 30.7617],
“吉林”: [125.8154, 44.2584],
“山东”: [117.1582, 36.8701],
“河南”: [113.4668, 34.6234],
“江苏”: [118.8062, 31.9208],
“安徽”: [117.29, 32.0581],
“湖北”: [114.3896, 30.6628],
“浙江”: [119.5313, 29.8773],
‘内蒙古’: [110.3467, 41.4899],
“江西”: [116.0046, 28.6633],
“湖南”: [113.0823, 28.2568],
“贵州”: [106.6992, 26.7682],
“云南”: [102.9199, 25.4663],
“广东”: [113.12244, 23.009505],
“广西”: [108.479, 23.1152],
“海南”: [110.3893, 19.8516],
‘黑龙江’: [127.9688, 45.368],
‘台湾’: [121.4648, 25.5630]
};
var data=[
{name:“宁夏”,value:“250021”},
{name:“新疆”,value:“452001”},
{name:“广东”,value:“550021”},
{name:“广西”,value:“258821”},
{name:“海南”,value:“457721”},
{name:“山东”,value:“521990”},
{name:“河南”,value:“521990”},
{name:“湖北”,value:“521990”},
{name:“湖南”,value:“212100”},
{name:“天津”,value:“1119938”},
{name:“河北”,value:“719938”},
{name:“浙江”,value:“521990”},
{name:“安徽”,value:“521990”},
{name:“福建”,value:“521990”},
{name:“江西”,value:“521990”},
{name:“山西”,value:“819938”},
{name:“内蒙古”,value:“919938”},
{name:“重庆”,value:“322100”},
{name:“四川”,value:“252100”},
{name:“贵州”,value:“252100”},
{name:“云南”,value:“252100”},
{name:“西藏”,value:“252001”},
{name:“陕西”,value:“450021”},
{name:“甘肃”,value:“450021”},
{name:“青海”,value:“350021”},
{name:“辽宁”,value:“619938”},
{name:“吉林”,value:“719938”},
{name:“黑龙江”,value:“919938”},
{name:“上海”,value:“1019938”},
{name:“江苏”,value:“521990”}
]
//series数据
var capital=[
{name:“宁夏”,value:[{name:“时间”,value:“20170303”},{name:“数值”,value:“250021”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]},
{name:“新疆”,value:[{name:“时间”,value:“20170302”},{name:“数值”,value:“452001”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“广东”,value:[{name:“时间”,value:“20170301”},{name:“数值”,value:“550021”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]},
{name:“广西”,value:[{name:“时间”,value:“20170325”},{name:“数值”,value:“258821”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“海南”,value:[{name:“时间”,value:“20170315”},{name:“数值”,value:“457721”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]},
{name:“山东”,value:[{name:“时间”,value:“20180316”},{name:“数值”,value:“521990”},{name:“类型”,value: “资金”},{name:“程度”,value:“一般”}]},
{name:“河南”,value:[{name:“时间”,value:“20180315”},{name:“数值”,value:“521990”},{name:“类型”,value:“资金”},{name:“程度”,value:“一般”}]},
{name:“湖北”,value:[{name:“时间”,value:“20180314”},{name:“数值”,value:“521990”},{name:“类型”,value:“资金”},{name:“程度”,value:“一般”}]},
{name:“湖南”,value:[{name:“时间”,value:“20180313”},{name:“数值”,value:“212100”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“天津”,value:[{name:“时间”,value:“20190305”},{name:“数值”,value:“1119938”},{name:“类型”,value:“资金”},{name:“程度”,value:“严重”}]},
{name:“河北”,value:[{name:“时间”,value:“20190205”},{name:“数值”,value:“719938”},{name:“类型”,value:“资金”},{name:“程度”,value:“严重”}]}]
var manage=[
{name:“浙江”,value:[{name:“时间”,value:“20180320”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“安徽”,value:[{name:“时间”,value:“20180319”},{name:“数值”,value:“521990”},{name:“类型”,value: “管理”},{name:“程度”,value: “一般”}]},
{name:“福建”,value:[{name:“时间”,value:“20180318”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“江西”,value:[{name:“时间”,value:“20180317”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“山西”,value:[{name:“时间”,value:“20190105”},{name:“数值”,value:“819938”},{name:“类型”,value: “管理”},{name:“程度”,value: “严重”}]},
{name:“内蒙古”,value:[{name:“时间”,value:“20180326”},{name:“数值”,value:“919938”},{name:“类型”,value:“管理”},{name:“程度”,value:“严重”}]}]
var person=[
{name:“重庆”,value:[{name:“时间”,value:“20180312”},{name:“数值”,value:“322100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“四川”,value:[{name:“时间”,value:“20180311”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“贵州”,value:[{name:“时间”,value:“20180310”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“云南”,value:[{name:“时间”,value:“20170309”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“西藏”,value:[{name:“时间”,value:“20170308”},{name:“数值”,value:“252001”},{name:“类型”,value:“人员”},{name:“程度”,value: “轻微”}]},
{name:“陕西”,value:[{name:“时间”,value:“20170307”},{name:“数值”,value:“450021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“甘肃”,value:[{name:“时间”,value:“20170306”},{name:“数值”,value:“450021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“青海”,value:[{name:“时间”,value:“20170304”},{name:“数值”,value:“350021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]}]
var weather = [
{name:“辽宁”,value:[{name:“时间”,value:“20180325”},{name:“数值”,value:“619938”},{name:“类型”,value: “天气”},{name:“程度”,value: “严重”}]},
{name:“吉林”,value:[{name:“时间”,value:“20180324”},{name:“数值”,value:“719938”},{name:“类型”,value:“天气”},{name:“程度”,value: “严重”}]},
{name:“黑龙江”,value:[{name:“时间”,value:“20180323”},{name:“数值”,value:“919938”},{name:“类型”,value:“天气”},{name:“程度”,value:“严重”}]},
{name:“上海”,value:[{name:“时间”,value:“20180322”},{name:“数值”,value:“1019938”},{name:“类型”,value:“天气”},{name:“程度”,value:“严重”}]},
{name:“江苏”,value:[{name:“时间”,value:“20180321”},{name:“数值”,value:“521990”},{name:“类型”,value:“天气”},{name:“程度”,value:“一般”}]}]
var data = [
{name:“天津”,value:[{name:“时间”,value:“20190305”},{name:“数值”,value:“1119938”},{name:“类型”,value:“资金”},{name:“程度”,value:“严重”}]},
{name:“河北”,value:[{name:“时间”,value:“20190205”},{name:“数值”,value:“719938”},{name:“类型”,value:“资金”},{name:“程度”,value:“严重”}]},
{name:“山西”,value:[{name:“时间”,value:“20190105”},{name:“数值”,value:“819938”},{name:“类型”,value: “管理”},{name:“程度”,value: “严重”}]},
{name:“内蒙古”,value:[{name:“时间”,value:“20180326”},{name:“数值”,value:“919938”},{name:“类型”,value:“管理”},{name:“程度”,value:“严重”}]},
{name:“辽宁”,value:[{name:“时间”,value:“20180325”},{name:“数值”,value:“619938”},{name:“类型”,value: “天气”},{name:“程度”,value: “严重”}]},
{name:“吉林”,value:[{name:“时间”,value:“20180324”},{name:“数值”,value:“719938”},{name:“类型”,value:“天气”},{name:“程度”,value: “严重”}]},
{name:“黑龙江”,value:[{name:“时间”,value:“20180323”},{name:“数值”,value:“919938”},{name:“类型”,value:“天气”},{name:“程度”,value:“严重”}]},
{name:“上海”,value:[{name:“时间”,value:“20180322”},{name:“数值”,value:“1019938”},{name:“类型”,value:“天气”},{name:“程度”,value:“严重”}]},
{name:“江苏”,value:[{name:“时间”,value:“20180321”},{name:“数值”,value:“521990”},{name:“类型”,value:“天气”},{name:“程度”,value:“一般”}]},
{name:“浙江”,value:[{name:“时间”,value:“20180320”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“安徽”,value:[{name:“时间”,value:“20180319”},{name:“数值”,value:“521990”},{name:“类型”,value: “管理”},{name:“程度”,value: “一般”}]},
{name:“福建”,value:[{name:“时间”,value:“20180318”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“江西”,value:[{name:“时间”,value:“20180317”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“山东”,value:[{name:“时间”,value:“20180316”},{name:“数值”,value:“521990”},{name:“类型”,value: “资金”},{name:“程度”,value:“一般”}]},
{name:“河南”,value:[{name:“时间”,value:“20180315”},{name:“数值”,value:“521990”},{name:“类型”,value:“资金”},{name:“程度”,value:“一般”}]},
{name:“湖北”,value:[{name:“时间”,value:“20180314”},{name:“数值”,value:“521990”},{name:“类型”,value:“资金”},{name:“程度”,value:“一般”}]},
{name:“湖南”,value:[{name:“时间”,value:“20180313”},{name:“数值”,value:“212100”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“重庆”,value:[{name:“时间”,value:“20180312”},{name:“数值”,value:“322100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“四川”,value:[{name:“时间”,value:“20180311”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“贵州”,value:[{name:“时间”,value:“20180310”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“云南”,value:[{name:“时间”,value:“20170309”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“西藏”,value:[{name:“时间”,value:“20170308”},{name:“数值”,value:“252001”},{name:“类型”,value:“人员”},{name:“程度”,value: “轻微”}]},
{name:“陕西”,value:[{name:“时间”,value:“20170307”},{name:“数值”,value:“450021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“甘肃”,value:[{name:“时间”,value:“20170306”},{name:“数值”,value:“450021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“青海”,value:[{name:“时间”,value:“20170304”},{name:“数值”,value:“350021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“宁夏”,value:[{name:“时间”,value:“20170303”},{name:“数值”,value:“250021”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]},
{name:“新疆”,value:[{name:“时间”,value:“20170302”},{name:“数值”,value:“452001”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“广东”,value:[{name:“时间”,value:“20170301”},{name:“数值”,value:“550021”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]},
{name:“广西”,value:[{name:“时间”,value:“20170325”},{name:“数值”,value:“258821”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“海南”,value:[{name:“时间”,value:“20170315”},{name:“数值”,value:“457721”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]}
]
var capitalData = function(data) {
var res = [];
for (var i = 0; i < capital.length; i++) {
var geoCoord = geoCoordMap[capital[i].name];
if (geoCoord) {
res.push({
name: capital[i].name,
value: geoCoord.concat(capital[i].value[1].value)
});
}
}
return res;
};
var manageData = function(data) {
var res = [];
for (var i = 0; i < manage.length; i++) {
var geoCoord = geoCoordMap[manage[i].name];
if (geoCoord) {
res.push({
name: manage[i].name,
value: geoCoord.concat(manage[i].value[1].value)
});
}
}
return res;
};
var personData = function(data) {
var res = [];
for (var i = 0; i < person.length; i++) {
var geoCoord = geoCoordMap[person[i].name];
if (geoCoord) {
res.push({
name: person[i].name,
value: geoCoord.concat(person[i].value[1].value)
});
}
}
return res;
};
var weatherData = function(data) {
var res = [];
for (var i = 0; i < weather.length; i++) {
var geoCoord = geoCoordMap[weather[i].name];
if (geoCoord) {
res.push({
name: weather[i].name,
value: geoCoord.concat(weather[i].value[1].value)
});
}
}
return res;
};
$.getJSON(chinaDataURL, function(geoJson) {
echarts.registerMap(‘china’, geoJson)
option = {backgroundColor: '#030303',title: {text: '全国主要城市损失',sublink: 'http://www.pm25.in',left: 'center',textStyle: {color: '#fff'}},tooltip: {trigger: 'item',formatter: function(params) {var toolTiphtml = ''for(var i = 0;i<data.length;i++){if(params.name==data[i].name){toolTiphtml += data[i].name+':<br>'for(var j = 0;j<data[i].value.length;j++){toolTiphtml+=data[i].value[j].name+':'+data[i].value[j].value+"<br>"}}}return toolTiphtml;}},legend: {orient: 'vertical',right: 20,top: 10,data: [{name: '天气',}, {name: '资金',},{name: '管理',},{name: '人员',}],textStyle: {color: '#fff'}},visualMap: {min: 0,max: 1200000,left: 20,bottom: 20,calculable: true,text: ['高', '低'],inRange: {color: ['rgb(70, 240, 252)', 'rgb(250, 220, 46)', 'rgb(245, 38, 186)']},textStyle: {color: '#fff'}},geo: {map: 'china',label: {emphasis: {show: false}},itemStyle: {normal: {areaColor: 'rgb(19, 91, 153)',borderColor: 'rgb(9, 54, 95)'},emphasis: {areaColor: 'rgb(10, 105, 187)'}}},series: [{name: '天气',type: 'scatter',coordinateSystem: 'geo',data: weatherData(data),symbol:'arrow',symbolSize: function(val) {return val[2] / 50000;},label: {normal: {show: false,formatter: function(params) {// console.log(params);return params.name;},position: 'right',color: '#fff',fontSize: '8'},emphasis: {show: false}},itemStyle: {normal: {color: '#4bbbb2',borderWidth: 2,borderColor: '#b4dccd'}}},{name: '资金',type: 'scatter',coordinateSystem: 'geo',data: capitalData(data),symbol:'circle', symbolSize: function(val) {return val[2] / 50000;},label: {normal: {show: false,formatter: function(params) {// console.log(params);return params.name;},position: 'right',color: '#fff',fontSize: '8'},emphasis: {show: false}},itemStyle: {normal: {color: '#ea6347',borderWidth: 2,borderColor: '#f4b391'}}},{name: '管理',type: 'scatter',coordinateSystem: 'geo',data: manageData(data),symbol: 'pin', symbolSize: function(val) {return val[2] /50000;},label: {normal: {show: false,formatter: function(params) {// console.log(params);return params.name;},position: 'right',color: '#fff',fontSize: '8'},emphasis: {show: false}},itemStyle: {normal: {color: '#00ff00',borderWidth: 2,borderColor: '#55E355'}}},{name: '人员',type: 'scatter',coordinateSystem: 'geo',data: personData(data),symbol:'triangle',symbolSize: function(val) {console.log(personData(data))return val[2] / 50000;},label: {normal: {show: false,formatter: function(params) {// console.log(params);return params.name;},position: 'right',color: '#fff',fontSize: '8'},emphasis: {show: false}},itemStyle: {normal: {color: '#FAFF1A',borderWidth: 2,borderColor: '#E3BC1F'}}},{type: 'map',map: 'china',geoIndex: 0,aspectScale: 0.75, //长宽比tooltip: {show: false}}]
}myChart.setOption(option);
})；
echarts 中国地图，tooltip，legend同时显示多组数据相关推荐
- 【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图 前置条件,必看 首先你需要安装echarts并引入 然后你需要下载china.json文件并注册引入,不然不生效 当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
- Echarts中国地图修改
前言 在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下. Echarts中国地图 地图样式修改 标题修改 数值功能删除,但保留数据计算 按钮功能去除 地图 ...
- VUE 中实现echarts中国地图 人口迁徙
VUE 中实现echarts中国地图 人口迁徙 效果图: 安装Echarts依赖 要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
- 中国地图tooltip轮播以及点击tooltip进行页面跳转
中国地图tooltip轮播以及点击tooltip进行页面跳转 tooltip轮播点击进行页面跳转 废话不说,直接上代码 <div id="ChartsChina" ref=& ...
- echarts 中国地图散点图渲染
准备 echarts 中国地图的json(在最后) GitHub的demo地址,可以直接拉下来 先注册地图 import * as echarts from 'echarts'; import { d ...
- 前端jq/vue echarts中国地图的实现
一.jquery项目实现echarts中国地图 1.引入相关资源文件 jquery.echarts 等 <script src="https://cdn.bootcdn.net/aja ...
- Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
- echarts 中国地图 世界地图
最近项目中用到了echarts 中国地图 世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
- Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
- HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
最新文章
- python逐个读取文件并处理_逐个读取多个文件并用python进行处理
- 博士大佬为机器学习总结的人工智能入门指南！
- O“.NET研究”bjective-C入门
- 重学前端-学习笔记-JavaScript对象
- html5语音对讲,c#语音对讲demo
- 160 - 18 Brad Soblesky.1
- 【牛客 - 302哈尔滨理工大学软件与微电子学院第八届程序设计竞赛同步赛（低年级）】 小乐乐算数字（水题，快速幂，lowbit）
- 献给新一代人工智能后浪——《后丹》
- php 双向队列,PHP实现一个双向队列
- centos 去除屏幕保护
- django 定制admin
- pytorch torch.utils.data.Dataset
- Set,List,Map,Vector,ArrayList的区别
- windows 程序员计算器 详细解释
- C语言：用指针求字符串长度
- Ps 快速更改头发颜色
- 贪心算法之田忌赛马(超详细)
- matlab 绘制高斯(Gaussan)函数图像
- rmi反序列化导致rce漏洞修复_RMI反序列化漏洞分析
- 【CVPR2021】AdderSR: Towards Energy Efficient Image Super-Resolution