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

最新推荐文章于 2021-04-24 10:18:01 发布
最新推荐文章于 2021-04-24 10:18:01 发布
阅读量1.2k 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/standby/p/8552909.html
版权

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>
　　

　　

转载于:https://www.cnblogs.com/standby/p/8552909.html

weixin_30729609
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 多个series_请教：如何让echarts的地图悬浮框出现多组series数据？
weixin_39811166的博客
12-22 881
已经找到问题所在，昨天在网上查找了一下相关的资料，发现了解决方案，在此自问自答，希望能帮到有需要的朋友：1、 通过option.series获取到全部数据系列2、 在tooltip(控制悬浮框的属性)的formatter属性中使用回调来返回需要展示的字符格式3、在回调中遍历series和series.data，通过判断当前数据是否属于当前地区来拼装字符串下面是解决方案的代码：var chart =...
echarts地图散点悬浮显示多条数据
10-29
echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据
echarts 中国地图，tooltip，legend同时显示多组数据
qq_35736779的博客
08-19 8913
此echarts图只是用于示例，记录在此，只是为方便以后可能需要用到做参考。具体数据部分，部分代码不够严整，就不在考虑范围了，毕竟这种较为复杂的图形用的也不多。 // 地图数据 var chinaDataURL = “/asset/get/s/data-1517645039291-B1vgpymUz.json”; //坐标 var geoCoordMap = { ‘上海’: [119.1803, ...
echarts异步加载多组数据
wchqzhy99的专栏
01-19 804
明 创建的maven项目 需要echarts.js和jquery.jsecharts.min.jsjquery-3.2.1.min.js 官网介绍 Echarts官网链接 初步教程 初步教程，搭建环境 异步加载 异步加载案例有加载一组数据 加载两组数据 加载饼图数据 加载一组数据 前台处理 首先看加载条形图的数据结构 option = { title: { ...
用Echarts动态显示两组数据图形
weixin_34107955的博客
01-16 3213
最近公司项目需要用到实时数据显示, 所以就了解到了Echarts这个强大的工具, 使用中也遇到了好多坑, 记录一下, 希望也给需要的人提供帮助 要在项目中使用Echarts, 首先需要在页面里引入, 你可以完全下载下来, 或者用npm之类的包管理工具, 或者直接引入cdn加速地址, 我这里用的后者 在html页面直接引入 <script src="https://cdn.bootcss....
Echarts之悬浮框中的数据排序问题
12-12
 悬浮框的数据排序默认是根据series中的数据位置排序的，在我们想自定义排序时，在echarts的配置中有一个tooltip  以下为数据降序的代码：  tooltip = { trigger: 'axis', formatter: (params) => { // ...
Echarts 地图隐藏右下角 “南海诸岛” 的方法
01-20
1、需求： Echarts 地图右下角 “南海诸岛” 在项目中有点多余，需要隐藏 2、查询 Echarts 官网配置项，发现修改属性 “geo.regions” 即可 3、没设置属性 “geo.regions” 之前，如下图 4、设置属性 “geo....
Echarts地图 详细镇区的划分
09-17
_chinaMap = echarts.init(dom); _chinaMap.on('click', function(params) { console.log(params); var _type = params.seriesType; if (_type == "map") { //window.parent.aaa('aa') //调用父页面方法 } ...
echarts上各个省的3DMap以及地图上加柱状图以及tooltip集成
01-07
文档适用于内网环境，主要展示各个地区的3D地图，支持离线以及地图加柱状图。具体样式自行修改。没有积分的可以私聊我的QQ 1219649500
解决echarts的多个折现数据出现坐标和值对不上的问题
10-17
主要介绍了解决echarts的多个折现数据出现坐标和值对不上的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Python+pyecharts在地图上呈现数据
zwy_0309的博客
10-21 2万+
本文主要内容前言一、 地图的基本使用方法二、 地图与数据结合1、各省GDP在地图上展示2、去除地图上的数据信息3、用颜色区别数据大小4、自己定义颜色区间5、修改点的显示效果6、修改地图的色彩三、 Pyecharts制作地图的其他几种方式1、Map()2、Geo（）3、Bmap（）4、Map3D（） 前言 今天和老师一起学习在地图上呈现数据，使用的库为pyecharts。 看到这个库名时，我有似曾相似的感觉，翻看了一下，前段时间想实现可交互的图表时，了解过这个库。所以关于这个库，我这儿顺便多说几句吧。 Pye
ECharts地图中tooltip提示框通过formatter分别显示多个数值
热门推荐
GiScript的博客
08-09 7万+
Echarts官方实例中 地图  最后一个是 iphone销量的全国地图    实例链接 但是tooltip提示框组件里默认显示的数量信息是所有value的和，而不是每一个单独展示。 现在我们想要分别显示iphone3，iphone4，iphone5的值，只需要修改tooltip即可。 //官方实例tooltip tooltip: {         trigger: 'item
Echarts 地图上显示数值
weixin_34238642的博客
04-12 3066
Echarts 地图上展示数值，效果如下：     上代码：关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', // 自定...
echart地图tooltip提示框的内容怎样让其显示各个数值而不是总和
笨小蛋的博客
03-14 5792
echart地图tooltip提示框的内容怎样让其显示各个数值而不是总和 1,情景描述： echart地图中,例如官方实例中的iphone销量的全国地图，tooltip提示框组件里默认显示的数量信息是所有value的和，而不是每一个单独展示。如图所示，297是iphone3和iphone4值的和。 ， 但是我想要分别显示iphone3，iphone4，iphone5的值，此时...
在echarts地图上显示不为0数字
yangxx的博客
04-24 789
在echarts地图上显示不为0数字 1.先看下echarts地图map的配置项 series: [ { name: mapName, // 系列名称 type: 'map', map: mapName, // 同 registerMap 方法的第一个参数一致 zoom: 1.2, // 当前视角的缩放比例 zlevel: 1, // 用于 Canvas 分层，不同zl
echarts加载世界地图并展示个人数据
明月清風
09-10 7888
需求 之前基于GDELT抓取过部分一带一路沿线国家的新闻数据，对各个国家的新闻数据量进行了统计，打算做一张图进行直观的显示。 解决方案 懒得用ArcGIS来做了，想要磨练下代码水平，因此选择Javascript，调用Echarts进行绘制 由于之前调用Echarts的代码无法使用，所以这次不打算在线调用Echarts js文件，避免更新后原有代码无法使用的问题，因此将echarts.js下载到本地...
echarts市级区域地图数据展示
常小胖的博客
08-24 6278
一、原理 引用对应市区json数据（比如我就是引用的河南省驻马店市的数据），通过百度地图坐标拾取器获取地区的经纬度，将数据填在对应位置（我下面有注释），再配置下样式颜色之类的渲染上就可以了 二、看图片可能感受不大，下面是我echarts社区的主页，里面有这个例子，大家可以去看看效果 我的echarts个人主页 三、效果图 四、直接上代码，解释在注释里 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char
echarts地图 formatter获取series中data的数据显示不出
最新发布
04-01
可能是因为您没有正确地配置formatter函数。请确保您的formatter函数正确地获取了数据，并将其格式化为需要的形式。以下是一个示例： ```javascript formatter: function(params) { var value = params.value; var data = params.series.data; // 格式化数据 var formattedData = ... return formattedData; } ``` 请注意，params对象包含了许多有用的信息，如数据值、系列名称、坐标轴名称等。在使用formatter函数时，请确保您了解这些信息，并根据需要使用它们。 另外，如果您的数据无法正确显示，请检查数据格式是否正确，并确保您的地图配置正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值