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

不念不忘少年蓝@ 2022-12-04 07:46 427阅读 0赞

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

# 资料 #

[默认选中 和 不选中 传送门][_ _]  
[设置单选][Link 1]

# 实例 #

复制代码<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
                },
            },

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

[_ _]: https://echarts.apache.org/zh/option.html#legend.selected
[Link 1]: https://echarts.apache.org/zh/option.html#legend.selectedMode