在ngx-echarts中,是否有一种方式来配置图例图标的非活动状态?

huangapple go评论47阅读模式
英文:

In ngx-echarts, is there a way to configure the legend icon inactive state?

问题

我正在配置我的散点图图例,使用ngx-echarts。与在图例中使用固定符号表示我的数据系列不同,我想要显示一个表示激活时的选中复选框和非激活时的未选中复选框的图标。

我已经使用 "icon" 参数实现了第一个目标:

this.chartOption = {
  legend: {
    data: {
      name: 'serie1',
      icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0-24 18-42t-42 18H180Z'
    },
    data: {
      name: 'serie2',
      icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0-24 18-42t-42 18H180Z'
    }
  }
}

但是,虽然文档提到了 "inactiveColor"、"inactiveBorderColor" 等用于配置不激活时图例行为的选项,但我没有看到相应的图标选项(例如 "inactiveIcon")。

我是否遗漏了什么?

提前感谢。

英文:

I'm configuring the legend of my scatter chart using ngx-echarts. Instead of a fixed symbol to represent my data series in the legend, I would like to display an icon that represents a checked checkbox when active and an unchecked checkbox when inactive.

I achieved the first one using the "icon" parameter:

this.chartOption = {
  legend: {
   data: {
      name: 'serie1',
      icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z'
      },
   data: {
      name: 'serie2',
      icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z'
      }
   }
}

But, while the documentation mentions inactiveColor, inactiveBorderColor etc. to configure the behaviour of the legend when inactive, I don't see an equivalent for the icon (like "inactiveIcon").

Is there anything I've missed?

Thanks in advance

答案1

得分: 0

你可以使用 legendselectchanged 事件来动态更改图例的图标(或其他属性)。

假设你将 SVG 路径存储在一个字符串中,并按照标准方法创建了 ECharts 实例 myChart

const myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

const iconCheckedPath = 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0-24 18-42t-42 18H180Z';

使用以下初始 legend 选项:

const option = {
    // ........ 其他选项
    legend: {
        data: [{
                name: 'serie1',
                icon: iconCheckedPath
            },
            {
                name: 'serie2',
                icon: iconCheckedPath
            }
        ],
        // .....        
    }
    // ....
};
myChart.setOption(option);

你可以设置事件处理程序如下:

myChart.on('legendselectchanged', function ({selected}) {
    myChart.setOption({
        legend:{
            data: Object.entries(selected)
                .map(([name, nameSelected]) =>
                    ({name, icon: nameSelected ? iconCheckedPath: 'square'}))
        }
    })
});

这里有一个在 codesandbox 上的工作示例,是从 ECharts 的标准示例中衍生出来的。

如果在 legend.data 中有其他选项,可以使用以下方式将它们与新选项合并:

myChart.on('legendselectchanged', function ({selected}) {
    const actualData = myChart.getOption().legend[0].data;
    Object.entries(selected).forEach(([name, nameSelected])=>{
      const dataObj = actualData.find(({name: actualName})=>actualName === name);
      if(dataObj){
        dataObj.icon = nameSelected ? iconCheckedPath: 'square';
      }
    });
    myChart.setOption({
        legend:{
            data: actualData
        }
    })
});

这里有一个 codepen 示例。

英文:

You can use the legendselectchanged event to dynamically change the icon (or any other) properties of the legend.

Assuming that you set the svg path in a string and create the echarts instance myChart by the standard recipe:

const myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

const iconCheckedPath = 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z';

with the initial legend option as

const option = {
    // ........ other options
    legend: {
        data: [{
                name: 'serie1',
                icon: iconCheckedPath
            },
            {
                name: 'serie2',
                icon: iconCheckedPath
            }
        ],
        // .....        
    }
    // ....
};
myChart.setOption(option);

you may set the event handler as

myChart.on('legendselectchanged', function ({selected}) {
    myChart.setOption({
        legend:{
            data: Object.entries(selected)
                .map(([name, nameSelected]) =>
                    ({name, icon: nameSelected ? iconCheckedPath: 'square'}))
        }
    })
});

Here's a working example in a codesandbox, forked from one of echart's standard examples.

In case there are other options in legend.data, one may merge them with the new options with something on the lines of

myChart.on('legendselectchanged', function ({selected}) {
    const actualData = myChart.getOption().legend[0].data;
    Object.entries(selected).forEach(([name, nameSelected])=>{
      const dataObj = actualData.find(({name: actualName})=>actualName === name);
      if(dataObj){
        dataObj.icon = nameSelected ? iconCheckedPath: 'square';
      }
    });
    myChart.setOption({
        legend:{
            data: actualData
        }
    })
});

Here's a codepen example with that.

huangapple
  • 本文由 发表于 2023年6月12日 21:48:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/76457315.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定