Skip to content

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

@banyueyang

Description

@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 + Typescript@4.9.5

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions