echarts：设置默认选中，单选；多个柱状图时设置谁显示；多个图的时候设置谁显示

最新推荐文章于 2025-05-06 11:32:27 发布

Gabriel_wei

最新推荐文章于 2025-05-06 11:32:27 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 UI 学习

原文链接：https://www.cnblogs.com/niuben/p/11536026.html

前端同时被 3 个专栏收录

183 篇文章

订阅专栏

学习

61 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍如何使用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
            },
        },