fix(type): make the last two parameters ellipsis & options of the function truncateText optional

[banyueyang]

Version

5.4.2

Link to Minimal Reproduction

ts兼容问题

Steps to Reproduce

const optionPie: EChartsOption = {
        ...basePieOption,
        legend: {
          formatter: function (name) {
            return echarts.format.truncateText(name, 100, '14px Microsoft Yarer', '...');
          },
          tooltip: {
            show: true,
          },
        },
        series: [
          {
            name: '经营异常',
            type: 'pie',
            center: ['35.3%', '50%'],
            radius: [92, 120],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            tooltip: {
              formatter(params) {
                // params.value 为柱状图当前柱子对应的数据值
                // params.color 为柱状图当前柱子的颜色
                return `<div style="font-size:13px; font-weight:500;"><span style="display:inline-block;margin-right:8px;border-radius:50%;width:8px;height:8px;background-color:${params.color};"></span>${params.name}<br /><span style="margin-left: 16px;">${formattNumber(params.value)}%</span></div>`;
              },
              padding: [8, 10],
            },
            labelLine: {
              show: false,
            },
            // eslint-disable-next-line max-len
            data:
              Object.keys(abnormalIData.pieChartDTO?.visualData)?.map((item: any, i: number) => ({
                name: item,
                value: abnormalIData.pieChartDTO?.visualData[item],
                itemStyle: { color: piecolorList[i] || '' },
              })) || [],
          },
        ],
        graphic: [
          {
            type: 'text',
            left: 323 - textWidth / 2,
            top: 162,
            style: {
              text: abnormalIData.pieChartDTO?.statisticsShow, // 根据你的需求设置总数值
              width: 182,
              fill: '#333',
              fontSize: 30,
              fontWeight: 500,
              fontFamily: 'MiSans-Medium, MiSans',
            },
          },
          {
            type: 'text',
            left: 328 - subTextWidth / 2,
            top: 200,
            style: {
              text: abnormalIData.pieChartDTO?.statisticsText, // 根据你的需求设置总数值
              fill: '#666666',
              fontSize: 14,
            },
          },
        ],
      };

Current Behavior

我想在react + ts项目中使用echart的legend的formtter函数来做图例的省略号并且hover，但是ts中报错，需要传5个参数，官方例子中只有4个参数，第五个传什么呢
代码
echarts.format.truncateText(name, 100, '14px Microsoft Yarer', '...');

Expected Behavior

希望能够提供正确的ts中使用方法，

Environment

- OS:macOS Big Sur
- Browser:Chome 120.0.6099.109
- Framework: React@18 + [email protected]

Any additional comments?

No response

[echarts-bot]

@banyueyang It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] The echarts.format.truncateText method in legend's formatter function reported an error in ts: There should be 5 parameters, but 4 were obtained. How to solve it

BODY

Version

5.4.2

Link to Minimal Reproduction

ts compatibility issues

Steps to Reproduce

const optionPie: EChartsOption = {
...basePieOption,
legend: {
formatter: function (name) {
return echarts.format.truncateText(name, 100, '14px Microsoft Yarer', '...');
},
tooltip: {
show: true,
},
},
series: [
{
name: 'Business abnormality',
type: 'pie',
center: ['35.3%', '50%'],
radius: [92, 120],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
tooltip: {
formatter(params) {
// params.value is the data value corresponding to the current column of the histogram
// params.color is the color of the current column of the histogram
return <div style="font-size:13px; font-weight:500;"><span style="display:inline-block;margin-right:8px;border-radius:50%;width:8px;height :8px;background-color:${params.color};"></span>${params.name}<br /><span style="margin-left: 16px;">${formattNumber(params.value )}%</span></div>;
},
padding: [8, 10],
},
labelLine: {
show: false,
},
// eslint-disable-next-line max-len
data:
Object.keys(abnormalIData.pieChartDTO?.visualData)?.map((item: any, i: number) => ({
name: item,
value: abnormalIData.pieChartDTO?.visualData[item],
itemStyle: { color: piecolorList[i] || '' },
})) || [],
},
],
graphic: [
{
type: 'text',
left: 323 - textWidth / 2,
top: 162,
style: {
text: abnormalIData.pieChartDTO?.statisticsShow, //Set the total value according to your needs
width: 182,
fill: '#333',
fontSize: 30,
fontWeight: 500,
fontFamily: 'MiSans-Medium, MiSans',
},
},
{
type: 'text',
left: 328 - subTextWidth / 2,
top: 200,
style: {
text: abnormalIData.pieChartDTO?.statisticsText, //Set the total value according to your needs
fill: '#666666',
fontSize: 14,
},
},
],
`};```

Current Behavior

I want to use echart's legend's formtter function in the react + ts project to make the ellipsis and hover of the legend, but an error is reported in ts. 5 parameters need to be passed. There are only 4 parameters in the official example. What is the fifth parameter to pass?
code
echarts.format.truncateText(name, 100, '14px Microsoft Yarer', '...');

Expected Behavior

I hope to be able to provide the correct usage method in ts,

Environment

- OS: macOS Big Sur
- Browser:Chome 120.0.6099.109
- Framework: React@18 + [email protected]

Any additional comments?

No response

[helgasoft]

duplicate of #7479

[plainheart]

truncateText 方法是从 zrender 导出的，可以参考 zrender 源码。第五个参数是 options，实际上可以省略，后面我们考虑下将最后一个参数变为可选，以避免此类型错误。