echarts 多个series_Echarts地图悬浮框显示多组series数据以及修改地图大小

HULUHULU全国带宽分布var myChart = echarts.init(document.getElementById('province'));var option = {title : {text: 'HULU全国带宽',subtext: '数据来自HBase',x:'center'},tooltip : {trigger: 'item',formatter:function(par

weixin_39880337

1856人浏览 · 2020-12-22 18:19:14

weixin_39880337 · 2020-12-22 18:19:14 发布

HULU

HULU全国带宽分布

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+'
';

//定义一个变量来保存series数据系列

var myseries=option.series;

//循环遍历series数据系列

for(var i=0;i

//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示

for(var k=0;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+'
';

}

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 : [

{

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)}

]

{

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)}

]

{

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);

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

收藏！AI智能体（AI Agent）核心原理、架构及落地场景全解析（小白/程序员必看）

DAMO开发者矩阵

Python RPA从零到实战：一份为期100天的系统培训大纲

摘要：本文提供了一份为期100天的Python RPA系统学习计划，分为四个阶段：筑基篇（环境搭建与GUI自动化基础）、核心技能篇（Web自动化和数据处理）、进阶实战篇（增强技术与设计模式）以及高可用与部署篇（调度监控与综合项目）。该计划从基础操作到企业级应用开发循序渐进，包含每日学习内容和实战项目，帮助学习者掌握OCR识别、邮件自动化、API调用等关键技术，最终具备独立开发稳定高效RPA机器人的

DAMO开发者矩阵

华为eNSP模拟器综合实验之- ARP代理

摘要：ARP代理是一种网络通信机制，当处于不同物理网络但同一IP网段的主机需要通信时，由路由器（代理）以自己的MAC地址回应ARP请求，实现跨网络通信。其应用场景包括简化主机配置、透明化子网划分和VLAN聚合等，但可能增加网络负担和安全风险。华为设备支持多种ARP代理类型，通过"善意欺骗"解决网络分割问题，需在接口视图中使用arp-proxy enable命令启用，并可配置静态