Echarts地图悬浮框显示多组series数据以及修改地图大小
1.如何让echarts的地图悬浮框出现多组series数据？
2.如何更改地图默认的大小？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HULU</title>
<script src="{{ static_url('js/echarts-all.js') }}"></script>
</head>
<body> <h1 style="text-align: center">HULU全国带宽分布</h1> <div id="province" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <script> var myChart = echarts.init(document.getElementById('province'));
var option = {
title : {
text: 'HULU全国带宽',
subtext: '数据来自HBase',
x:'center'
},
tooltip : {
trigger: 'item',
formatter:function(params){
//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
var res=params.name+'<br />';
//定义一个变量来保存series数据系列
var myseries=option.series;
//循环遍历series数据系列
for(var i=0;i<myseries.length;i++){
//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
for(var k=0;k<myseries[i].data.length;k++){
//console.log(myseries[i].data[k].name);
//如果data数据中的name和地区名称一样
if(myseries[i].data[k].name==params.name){
//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
res+=myseries[i].name+':'+myseries[i].data[k].value+'<br />';
}
}
}
return res;
}
},
legend: {
orient: 'vertical',
x:'left',
data:['TV端下载','PC端下载','移动端下载']
},
dataRange: {
x: 'left',
y: 'bottom',
splitList: [
{start: 1500},
{start: 900, end: 1500},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '10 到 200（自定义label）'},
{start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
{end: 10}
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
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
}
},
series : [
{
name: 'TV端下载',
type: 'map',
mapType: 'china',
// 控制地图大小
mapLocation: {
x: '240',
y: 'center',
height: '75%'
},
roam: false,
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
color: "rgb(249, 249, 249)"
}
}
},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*2000)},
{name: '天津',value: Math.round(Math.random()*2000)},
{name: '上海',value: Math.round(Math.random()*2000)},
{name: '重庆',value: Math.round(Math.random()*2000)},
{name: '河北',value: 0},
{name: '河南',value: Math.round(Math.random()*2000)},
{name: '云南',value: 5},
{name: '辽宁',value: 100},
{name: '黑龙江',value: Math.round(Math.random()*2000)},
{name: '湖南',value: 200},
{name: '安徽',value: Math.round(Math.random()*2000)},
{name: '山东',value: Math.round(Math.random()*2000)},
{name: '新疆',value: Math.round(Math.random()*2000)},
{name: '江苏',value: Math.round(Math.random()*2000)},
{name: '浙江',value: Math.round(Math.random()*2000)},
{name: '江西',value: Math.round(Math.random()*2000)},
{name: '湖北',value: Math.round(Math.random()*2000)},
{name: '广西',value: Math.round(Math.random()*2000)},
{name: '甘肃',value: Math.round(Math.random()*2000)},
{name: '山西',value: Math.round(Math.random()*2000)},
{name: '内蒙古',value: Math.round(Math.random()*2000)},
{name: '陕西',value: Math.round(Math.random()*2000)},
{name: '吉林',value: Math.round(Math.random()*2000)},
{name: '福建',value: Math.round(Math.random()*2000)},
{name: '贵州',value: Math.round(Math.random()*2000)},
{name: '广东',value: Math.round(Math.random()*2000)},
{name: '青海',value: Math.round(Math.random()*2000)},
{name: '西藏',value: Math.round(Math.random()*2000)},
{name: '四川',value: Math.round(Math.random()*2000)},
{name: '宁夏',value: Math.round(Math.random()*2000)},
{name: '海南',value: Math.round(Math.random()*2000)},
{name: '台湾',value: Math.round(Math.random()*2000)},
{name: '香港',value: Math.round(Math.random()*2000)},
{name: '澳门',value: Math.round(Math.random()*2000)}
]
},
{
name: 'PC端下载',
type: 'map',
mapType: 'china',
// 控制地图大小
mapLocation: {
x: '240',
y: 'center',
height: '75%'
},
roam: false,
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
color: "rgb(249, 249, 249)"
}
}
},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*2000)},
{name: '天津',value: Math.round(Math.random()*2000)},
{name: '上海',value: Math.round(Math.random()*2000)},
{name: '重庆',value: Math.round(Math.random()*2000)},
{name: '河北',value: 0},
{name: '河南',value: Math.round(Math.random()*2000)},
{name: '云南',value: 5},
{name: '辽宁',value: 200},
{name: '黑龙江',value: Math.round(Math.random()*2000)},
{name: '湖南',value: 200},
{name: '安徽',value: Math.round(Math.random()*2000)},
{name: '山东',value: Math.round(Math.random()*2000)},
{name: '新疆',value: Math.round(Math.random()*2000)},
{name: '江苏',value: Math.round(Math.random()*2000)},
{name: '浙江',value: Math.round(Math.random()*2000)},
{name: '江西',value: Math.round(Math.random()*2000)},
{name: '湖北',value: Math.round(Math.random()*2000)},
{name: '广西',value: Math.round(Math.random()*2000)},
{name: '甘肃',value: Math.round(Math.random()*2000)},
{name: '山西',value: Math.round(Math.random()*2000)},
{name: '内蒙古',value: Math.round(Math.random()*2000)},
{name: '陕西',value: Math.round(Math.random()*2000)},
{name: '吉林',value: Math.round(Math.random()*2000)},
{name: '福建',value: Math.round(Math.random()*2000)},
{name: '贵州',value: Math.round(Math.random()*2000)},
{name: '广东',value: Math.round(Math.random()*2000)},
{name: '青海',value: Math.round(Math.random()*2000)},
{name: '西藏',value: Math.round(Math.random()*2000)},
{name: '四川',value: Math.round(Math.random()*2000)},
{name: '宁夏',value: Math.round(Math.random()*2000)},
{name: '海南',value: Math.round(Math.random()*2000)},
{name: '台湾',value: Math.round(Math.random()*2000)},
{name: '香港',value: Math.round(Math.random()*2000)},
{name: '澳门',value: Math.round(Math.random()*2000)}
]
},
{
name: '移动端下载',
type: 'map',
mapType: 'china',
// 控制地图大小
mapLocation: {
x: '240',
y: 'center',
height: '75%'
},
roam: false,
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
color: "rgb(249, 249, 249)"
}
}
},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*2000)},
{name: '天津',value: Math.round(Math.random()*2000)},
{name: '上海',value: Math.round(Math.random()*2000)},
{name: '重庆',value: Math.round(Math.random()*2000)},
{name: '河北',value: 0},
{name: '河南',value: Math.round(Math.random()*2000)},
{name: '云南',value: 5},
{name: '辽宁',value: 300},
{name: '黑龙江',value: Math.round(Math.random()*2000)},
{name: '湖南',value: 200},
{name: '安徽',value: Math.round(Math.random()*2000)},
{name: '山东',value: Math.round(Math.random()*2000)},
{name: '新疆',value: Math.round(Math.random()*2000)},
{name: '江苏',value: Math.round(Math.random()*2000)},
{name: '浙江',value: Math.round(Math.random()*2000)},
{name: '江西',value: Math.round(Math.random()*2000)},
{name: '湖北',value: Math.round(Math.random()*2000)},
{name: '广西',value: Math.round(Math.random()*2000)},
{name: '甘肃',value: Math.round(Math.random()*2000)},
{name: '山西',value: Math.round(Math.random()*2000)},
{name: '内蒙古',value: Math.round(Math.random()*2000)},
{name: '陕西',value: Math.round(Math.random()*2000)},
{name: '吉林',value: Math.round(Math.random()*2000)},
{name: '福建',value: Math.round(Math.random()*2000)},
{name: '贵州',value: Math.round(Math.random()*2000)},
{name: '广东',value: Math.round(Math.random()*2000)},
{name: '青海',value: Math.round(Math.random()*2000)},
{name: '西藏',value: Math.round(Math.random()*2000)},
{name: '四川',value: Math.round(Math.random()*2000)},
{name: '宁夏',value: Math.round(Math.random()*2000)},
{name: '海南',value: Math.round(Math.random()*2000)},
{name: '台湾',value: Math.round(Math.random()*2000)},
{name: '香港',value: Math.round(Math.random()*2000)},
{name: '澳门',value: Math.round(Math.random()*2000)}
]
}
]
};
myChart.setOption(option); </script> </body>
</html>
Echarts地图悬浮框显示多组series数据以及修改地图大小的更多相关文章
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
- Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- echarts自定义悬浮框的显示
最近在使用echarts的地图功能 ,业务需求是显示前五的具体信息,并且轮流显示,首先解决轮流显示的问题 var counta = 0; //播放所在下标 var mTime = setInterva ...
- Echarts之悬浮框中的数据排序
Echarts非常强大,配置也非常的多,有很多细节需要深入研究.详解一下关于悬浮框中的数据排序问题 悬浮框的数据排序默认是根据series中的数据位置排序的,在我们想自定义排序时,在echarts的配 ...
- echarts Y轴名称显示不全（转载）
转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...
- Android音视频通话过程中最小化成悬浮框的实现（类似Android8.0画中画效果）
关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
- C# 鼠标悬停在datagridview的某单元格，显示悬浮框效果
今天在做项目时,看到一软件做的悬浮框效果不错,从网上搜罗了一些资料,未见到有十分好的解决办法,只能自已动手,利用datagridview 的ToolTipText 来达到此效果. 以下是我简单实现的代 ...
随机推荐
- 谈谈IE针对Ajax请求结果的缓存
在默认情况下,IE会针对请求地址缓存Ajax请求的结果.换句话说,在缓存过期之前,针对相同地址发起的多个Ajax请求,只有第一次会真正发送到服务端.在某些情况下,这种默认的缓存机制并不是我们希望的(比 ...
- 实验六 MapReduce实验：二次排序
实验指导: 6.1 实验目的基于MapReduce思想,编写SecondarySort程序. 6.2 实验要求要能理解MapReduce编程思想,会编写MapReduce版本二次排序程序,然后将其执行 ...
- TypeError: __init__() got an unexpected keyword argument 't_command'
python .\manage.py migrate 报错如下 λ python .\manage.py migrateTraceback (most recent call last): File ...
- Asp.Net Output.Write()
string name="张三" <div> <label>@Output.Write(name)</label> </div> 在 ...
- springboot jar包运行中获取资源文件
1. 今天晚上写了一个程序,基于Spring boot的一个小网站,发现使用FileUtils.class.getResource(path)来获取jar包中的资源文件并不能成功,其路径很奇怪 fil ...
- 使用ajax实现前后端是数据交互
ajax的概念 ajax一个前后台配合的技术,它可以让javascript发送http请求,与后台通信,获取数据和信息.ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信.jquery ...
- 使用selenium 模拟人操作请求网页
首先要 pip install selenium 安装插件 然后要下载驱动驱动根据你的浏览器 Chrome selenium 驱动下载地址 http://chromedriver.storage. ...
- smartProgram学习笔记
背景:转正前要完成这样一个编程课的学习.平时写代码只是完成基本的功能,没有养成良好的习惯,感觉这样的课程还是要好好学习下,要不真是不知道什么叫写代码. Week1 为什么要写好代码? 因为平时读:写代 ...
- Keyboard Hook API函数 参数说明
来源:https://www.cnblogs.com/grenet/archive/2010/12/07/1898840.html 1.Keyboard的HOOK函数分为两种,WH_KEYBOARD_ ...
- 做IT项目管理也需要具备产品思维
不知道大家有没有听过大胡子姜志辉老师的公开课,我自己认为讲的还是不错的. 因为本身大胡子老师就是一个IT行业的人士,自己还经历了程序员.架构师.项目经理.敏捷教练.产品经理.公司持有人等多个角色.所以 ...