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 来达到此效果. 以下是我简单实现的代 ...
随机推荐
- Hdoj 2050.折线分割平面 题解
Problem Description 我们看到过很多直线分割平面的题目,今天的这个题目稍微有些变化,我们要求的是n条折线分割平面的最大数目.比如,一条折线可以将平面分成两部分,两条折线最多可以将平面 ...
- Java简单工厂模式(SimpleFactoryMode)
何为简单工厂模式? 由一个工厂类根据传入的参数,动态创建并返回相应的具体的实例! 三个构成元素: 1.工厂类 2.抽象产品 3.具体产品 优点: 1.提高扩展性 2.隐藏具体的实现类,并不需要知道产品 ...
- Android RadioGroup中设置默认选中RadioButton 后,选中两个的问题 解决方法
项目中遇到多个RadioGroup中单选RadioButton ,设置了默认选中第一个 . 然后就 能选中两个RadioButton . . .. 我开始这样给设置默认选中一个的: for (int ...
- Redhat上为java Maven项目构建基于Jenkins + Github的持续集成环境
在Redhat enterprise 6.5 的服务器上,为在gutub 上的 java mvaen项目构建一个持续集成环境,用到了Jenkins.因公司的服务器在内网,访问外网时要通过代理,所以为m ...
- Python变量与赋值
Python是一门独特的语言,与C语言有很大区别,初学Python很多萌新表示对变量与赋值不理解,学过C的都知道,给变量赋值时,需要先指定数据类型,同时会开辟一块内存区域,用于存储值,例如: int ...
- 模拟赛 yjqb
对于这种“不能交叉”的条件,不是很好处理.那么就考虑一下dp dp[i][j]表示,考虑A中用前i个,考虑连接B中用前j个,最大匹配.(类似LCS的DP) 转移:dp[i][j]=max(dp[i][ ...
- B1018. 锤子剪刀布
大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入第1行给出正整数N( ...
- (转）git checkout 撤销修改
背景:学习git相关命令 git撤销修改和版本回退 git status查看当前仓库的状态 liuzhipeng@exdroid43:~/pad/pad-test$ git status 位于分支 m ...
- TCHAR和CHAR类型的互转,string 转lpcwstr
https://www.cnblogs.com/yuguangyuan/p/5955959.html 没有定义UNICODE,所以它里面的字符串就是简单用" "就行了,创建工程的时 ...
- Django（十六）Form组件扩展
http://www.cnblogs.com/wupeiqi/articles/6144178.html Form组件 - form表单(验证:保留上次内容) - - Ajax(验证:无需上次内容) ...