当系列在中为空时，如何在图例中隐藏系列名称？
当系列在中为空时，如何在图例中隐藏系列名称？
提问于 2022-10-06 13:02:46
我用echarts创建了一个堆叠的直线图，并使用内置转换来过滤提供的数据，并使用ecSimpleTransform来聚合值。但是，一些数据集过滤后变为空，因为它们的值都不匹配筛选条件。我想添加一个图例，但它也包括空数据集的标签。有什么方法可以过滤图例值吗？
我附上了图表配置的简化版本。
我还创建了一个CodeSandbox实例。
legendData= [...] //list of possible 'propertyOne' values
const chartConfig = {
dataset: [
{
id: 'raw',
dimensions: ['date', 'value', 'propertyOne', 'propertyTwo'],
source: values,
},
{
id: 'filtered',
fromDatasetId: 'raw',
transform: [
{
type: 'filter',
config: {
dimension: 'propertyTwo',
'=': 'providedValue',
},
},
],
},
...legendData.map(propertyOneValue=> {
return {
id: propertyOneValue,
fromDatasetId: 'filtered',
transform: [
{
type: 'filter',
config: {
dimension: 'propertyOne',
'=': propertyOneValue,
},
},
{
type: 'ecSimpleTransform:aggregate',
config: {
resultDimensions: [
{ name: 'propertyOne', from: 'propertyOne' },
{ name: 'sum', from: 'value', method: 'sum' },
{ name: 'date', from: 'date' },
],
groupBy: 'date',
},
},
],
};
}),
],
tooltip: {
trigger: 'axis',
confine: true,
},
yAxis: {
nameLocation: 'middle',
nameGap: 30,
scale: true,
},
xAxis: {
type: 'category',
position: 'top',
},
grid: {
bottom: 50,
containLabel: true,
},
legend: {
selected: { detail: false },
data: legendData,
bottom: 0,
type: 'scroll',
},
series: [
...legendData.map(propertyOneValue => {
return {
name: propertyOneValue ,
type: 'line' as 'line',
areaStyle: {},
datasetId: propertyOneValue,
stack: 'Total',
encode: {
x: 'date',
y: 'sum',
itemName: 'propertyOne',
tooltip: 'sum',
},
};
}),
],
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-31 09:59:11
图表的图例将显示与legend.data中的值一样多的值。在您的示例中，当您将legendData分配给legend.data时，它仍然有4个值，而不仅仅是“定制1”、“定制2”。
一个简单的方法是只在创建legend.data时添加您想要的内容(而不是稍后对legendData进行过滤)。
values.forEach((value) => {
//just addind a second condition when pushing values to legendData
if (!legendData.includes(value.propertyOne) && value.propertyTwo == "providedValue"){
legendData.push(value.propertyOne);
}
});我不知道您打算对这个应用程序做什么，但是这个解决方案适用于您提供的沙箱。即使在以后执行...legendData.map()时，您也不会受到无用值(来自自定义3& 4)的干扰。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73974287
复制相关文章
相似问题
腾讯云开发者
