echarts:设置默认选中,单选;多个柱状图时设置谁显示;多个图的时候设置谁显示

本文介绍如何使用ECharts设置图例的单选模式,并通过实例展示了如何使某些图例项默认处于未选中状态,适用于图表交互设计的需求。

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

转自:https://www.cnblogs.com/niuben/p/11536026.html

资料

默认选中 和 不选中 传送门
设置单选

实例

复制代码<script>
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    option = {

        legend: {
            selected:{ // 设置默认不显示
                'BTC':false,
                'SZCI':false,
                'SHCI':false
            },
            selectedMode:'single' // 设置单选多选模式
        },
        tooltip: {},
        dataset: {
            source:JSON.parse('<?php echo json_encode($charts)?>')
        },
        xAxis: {type: 'category',name:'万'},
        yAxis: {name:'人数'},
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

关键代码

        legend: {
            top: 30,
            textStyle: {//图例文字的样式
                color: '#dbdbdb',
                fontSize: 15
            },
            data: ['良种繁育技术', '提高品质良种技术', '病虫害防控技术', '优质高效栽培技术'],
            selectedMode: 'single', // 设置单选多选模式
            selected: { // 设置默认不显示
                '良种繁育技术': false,
                '提高品质良种技术': false,
                '病虫害防控技术': false
            },
        },

其中:良种繁育技术为系列的名称

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值