echarts学习2----地图的改造以及主图副图的联动

本文介绍如何使用ECharts创建北京地图并实现两个副图的数据联动。通过修改地图类型为北京,设置各区域数据,利用JavaScript监听地图选择事件,动态更新副图数据,实现了点击地图上任一区域能即时显示该区域详细数据的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现在第二步要实现的是做一张北京的地图,并配上两个副图,网上有很多是中国地图的,只要把参数改成下面这样就可以变成北京的。


series: [
 
        {
 
            name:'降水量',
 
            type:'map',
 
            mapType:'北京',//这里就是改成北京地图的关键
 
            selectedMode: 'single',
 
            itemStyle: {
 
                normal: { label: { show:true },color:'blue' },// for legend
 
                emphasis: { label: { show:true} }
 
            },
 
            data: [//下面是从map.js里面找出来的各个区
 
                { name:'怀柔区',value:Math.round(Math.random() *1000) },
 
                { name:'房山区',value:Math.round(Math.random() *1000) },
 
                { name:'延庆县',value:Math.round(Math.random() *1000) },
 
                { name:'门头沟区',value:Math.round(Math.random() *1000) },
 
                { name:'昌平区',value:Math.round(Math.random() *1000) },
 
                { name:'大兴区',value:Math.round(Math.random() *1000) },
 
                { name:'顺义区',value:Math.round(Math.random() *1000) },
 
                { name:'平谷区',value:Math.round(Math.random() *1000) },
 
                { name:'通州区',value:Math.round(Math.random() *1000) },
 
                { name:'朝阳区',value:Math.round(Math.random() *1000) },
 
                { name:'海淀区',value:Math.round(Math.random() *1000) },
 
                { name:'石景山区',value:Math.round(Math.random() *1000) },
 
                { name:'西城区',value:Math.round(Math.random() *1000) },
 
                { name:'东城区',value:Math.round(Math.random() *1000) },
 
                { name:'崇文区',value:Math.round(Math.random() *1000) },

{ name:'密云县',value:Math.round(Math.random() *1000) },

{ name:'丰台区',value:Math.round(Math.random() *1000) }
 
            ]
 
        },


像上面那样就可以把地图改成的北京的,现在正在想,怎么搞那个什么副图。。。。。好像就是弄两个div 两个mychart,嗯,就是这样。。


首先巩固一下以前的知识点,我先把主的那个main的div给弄左边一点:
<div id="main"style="position:absolute;top:10px;left:10px;height:500px;width:500px;border:1px solid #ccc;padding:10px;"></div>
先弄成绝对定位,top和left  height和width 都要定义,这样就能控制位置。
   
然后添加两个副图的位置:
  <div id="sub1"style="position:absolute;top:10px;left:800px;height:250px;width:400px;border:1px solid #ccc;padding:10px;"></div>
   <div id="sub1"style="position:absolute;top:300px;left:800px;height:250px;width:400px;border:1px solid #ccc;padding:10px;"></div>


然后在function(ec)里面添加
var myChart=ec.init(document.getElementById('main'));
var myChart2=ec.init(document.getElementById('sub1'));
var myChart3=ec.init(document.getElementById('sub2'));
来引用这三个div


接着是后台数据获取的部分:

           var ecConfig= require('echarts/config');
            myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) 
{
var selected=param.selected;
var mapSeries=option.series[0];
  //alert(mapSeries.data.length);
                var data= [];
                var legendData= [];
                var name;
                for (var p=0,len=mapSeries.data.length; p<len; p++)
{

                    name=mapSeries.data[p].name;//先循环每一个县的名字
                    mapSeries.data[p].selected=selected[name];
                    //alert(selected[name]);只有查到选中的那个,这个才会是true
if (selected[name])
{
myChart2.setOption(option2[p]);//动态地改变两个副图的参数
myChart3.setOption(option3[p]);
                    }
                }
            }
);               

myChart.setOption(option);




通过上面的代码可以看到,基本上就是靠返回的P序号来确定点击的是北京市的哪个县,所以我就把每个县的option数据都存到一个数组里面,两个副图的option选项分别是option2 和option3。
Option2举例:
Option2=[{
    calculable : true,
    xAxis : 
[
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : 
[
        {
            type : 'value',
            splitArea : {show : true}
        }
    ],
title: {
 
                    text:'怀柔区降水',
 
                    subtext:'单位:毫升',
 
                    x:'200px'
 
                },
    series :
[
{
            name:'怀柔区',
            type:'bar',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        }
    ]
},
{
    calculable : true,
    xAxis : 
[
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : 
[
        {
            type : 'value',
            splitArea : {show : true}
        }
    ],
title: {
 
                    text:'房山区降水',
 
                    subtext:'单位:毫升',
 
                    x:'200px'
 
                },
    series :
[
{
            name:'房山区',
            type:'bar',
            stack: '总量',
            data:[102, 0, 31, 24, 0, 50, 20]
        }
    ]
}

];//这里我只列了两个,总的是有17个,对应每个地域


就这样一个一个存进数组里。

最后就像下面这样的效果:点击地图上的一个地方,其它两个副图可以联动显示相应地区的数据


 
3、pyecharts综合题(40分)‌ ‌ 基于某电商平台2024年Q1的‌多维度销售数据‌,创建动态交互组合仪表盘,需实现‌数据联动‌与‌多层分析‌。 ‌数据‌: data = { "月份": ["1月", "2月", "3月"], "总销售额": [4200, 3800, 5100], # 单位:万元 "订单量": [8500, 7200, 9300], "转化率": [0.18, 0.21, 0.23], # 百分比 "品类占比": [ # 每月三大品类占比 {"家电": 0.35, "服饰": 0.45, "美妆": 0.20}, {"家电": 0.28, "服饰": 0.50, "美妆": 0.22}, {"家电": 0.40, "服饰": 0.38, "美妆": 0.22} ], "周趋势": { # 细化到周粒度的销售额 "1月": [980, 1120, 1050, 1050], # 每周数据(4周) "2月": [800, 920, 950, 1130], "3月": [1200, 1250, 1300, 1350] } } ‌要求:‌ ‌:动态堆叠柱状+双折线‌ ‌柱状‌:按月展示三大品类销售额堆叠(家电/服饰/美妆),体现结构变化 ‌折线1‌:总销售额趋势(Y轴,单位:万元) ‌折线2‌:转化率趋势(次Y轴,百分比形式) 交互:点击例可隐藏/显示特定品类或折线 ‌1:联动漏斗‌ 显示‌当前选中月份‌的品类转化漏斗(例:曝光→点击→加购→下单) 模拟数据要求:根据品类占比生成对应转化率(如服饰曝光量=10000×占比) 交互:点击月份时,漏斗动态更新 ‌2:时间序列热力‌ 以周为单元绘制销售额热力(X轴:月份,Y轴:周序号,颜色深浅表销售额) 标注特殊节点(如最高周销售额:3月第4周:1350万) ‌ 添加Interval组件实现自动轮播(每3秒切换月份,触发漏斗更新) 工具栏增加数据视按钮,可导出原始数据 题使用chalk暗色系(需配置ThemeType.CHALK),基于pyecharts2.0.8版本
最新发布
06-23
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值