{site_name}

{site_name}

🌜 搜索

ECharts图例组件是用于展示数据系列的标识和控制开关的组件

前端 𝄐 0
echarts设置图例,echart 自定义图例,echarts图例过多处理,echarts图例自定义,echarts图例大小设置,echart图例位置
ECharts图例组件是用于展示数据系列的标识和控制开关的组件。其中,图例控制块是指在图例组件中可以自定义添加的按钮,用于控制数据系列的显示和隐藏。例如,可以通过点击按钮实现只显示某个数据系列或显示全部数据系列。

以下是一个简单的 ECharts 图例组件配置示例,包括图例名称、位置、图例控制块等项:

javascript
option = {
legend: {
data: ['数据系列1', '数据系列2', '数据系列3'],
show: true,
orient: 'vertical',
left: 'right',
top: 'middle',
selected: {
'数据系列1': true,
'数据系列2': false,
'数据系列3': true
},
inactiveColor: '#ccc',
textStyle: {
color: '#333'
},
formatter: function(name){
return 'Legend: ' + name;
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{a} : {b}'
},
// 图例控制块配置项
selector: [
{
type: 'all',
title: '显示所有数据系列'
},
{
type: 'inverse',
title: '反选数据系列'
},
{
type: 'single',
title: '只显示数据系列1',
dataIndex: 0
}
]
},
series: [
{
name: '数据系列1',
type: 'line',
data: [10, 20, 30, 40, 50]
},
{
name: '数据系列2',
type: 'line',
data: [20, 30, 40, 50, 60]
},
{
name: '数据系列3',
type: 'line',
data: [30, 40, 50, 60, 70]
}
]
};


在上述示例中,图例组件的 selector 配置项定义了三个按钮,分别用于显示全部数据系列、反选数据系列和仅显示数据系列1。这些按钮可以通过鼠标点击来实现对数据系列的控制。