echarts 地图默认选中效果

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            selectedMode : 'multiple',  // 选中效果固话
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name:'广东', selected:true} // selected:true 默认选中
            ]
        }
    ]
};
  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Echarts是一个基于JavaScript的开源可视化库,它提供了丰富的图表类型和交互功能。其中,地图Echarts中的一个重要组件,可以用来展示各种地理数据。在Echarts地图中,可以通过设置selectedMode属性来实现选中效果。具体来说,可以设置为single(单选)、multiple(多选)或false(不可选中)。同时,可以通过dispatchAction方法来触发选中效果,例如在鼠标移动或点击事件中使用。在选中效果中,可以设置选中的系列和数据索引,从而实现对地图上特定区域的高亮显示。 下面是一个示例代码,用于实现Echarts地图选中效果: ``` option = { tooltip: { trigger: 'item', formatter: '{b}' }, series: [ { name: '中国', type: 'map', mapType: 'china', selectedMode: 'multiple', // 多选 label: { normal: { show: true }, emphasis: { show: true } }, data:[ { name:'广东', selected:true // 默认选中 } ] } ] }; // 选中效果 let index = 0; charts.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0, }); charts.on('mouseover', function(e) { if (e.dataIndex != index) { charts.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index, }); } }); charts.on('mouseout', function(e) { index = e.dataIndex; charts.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: e.dataIndex, }); }); charts.on("click", function(e) { if (e.dataIndex != index) { charts.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index, }); } index = e.dataIndex; charts.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: e.dataIndex, }); }); ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值