Skip to content

tooltip里的formatter写字符串会导致echarts不渲染出来,也不报错 #134

@Bigwavemei

Description

@Bigwavemei

{
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "red",
},
},
formatter: `function(params) {
'show source'
let colorIndex = 0;
let str =

params[0].axisValue
;
const maxDisplayCount = 10;
const displayCount = Math.min(params.length, maxDisplayCount);
const color_arr2 = [
'#5470c6',
'#91cc75',
'#fac858',
'#ee6666',
'#73c0de',
'#3ba272',
'#fc8452',
'#9a60b4',
'#ea7ccc',
];
for (let i = 0; i < displayCount; i += 2) {
str += '';
if (i < displayCount) {
let param1 = params[i];
let value1 = param1.value !== null ? param1.value : '暂无数据';

          const currentColor = color_arr2[colorIndex];
          const strSpan1 = <span style='color:currentColor'>●</span>;
          colorIndex = (colorIndex + 1) % color_arr2.length;
          str += <td>strSpan1 param1.seriesName: value1</td>;
        } else {
          str += '<td></td>';
        }
        if (i + 1 < displayCount) {
          let param2 = params[i + 1];
          let value2 = param2.value !== null ? param2.value : '暂无数据';
          const currentColor = color_arr2[colorIndex];
          const strSpan2 = <span style='color:currentColor'>●</span>;
          colorIndex = (colorIndex + 1) % color_arr2.length;
          str += <td>strSpan2 param2.seriesName: value2</td>;
        } else {
          str += '<td></td>';
        }
        str += '</tr>';
      }
      str += '</table>';
      if (params.length > maxDisplayCount) {
        str +=
          '... 还有' + (params.length - maxDisplayCount) + '条数据未显示';
      }
      return str;
    }`,
  },
  xAxis: {
    type: "category",
    data: convertedData.xAxisData,
  },
  yAxis: {
    type: "value",
    min: 0, // 将y轴最小值设为0
    scale: true, // 开启缩放,让刻度自动适配数据范围
    axisLine: {
      show: false,
      lineStyle: {
        width: 0,
      },
    },
  },
  dataZoom: [
    {
      type: "slider",
      xAxisIndex: 0,
      startValue: convertedData.xAxisData[0], // 设置起始数据值
      endValue: convertedData.xAxisData[convertedData.xAxisData.length - 1], // 设置结束数据值
      show: true, // 隐藏缩放长条
      // zoomLock: true, // 锁定滑块缩放
    },
  ],
  series: Object.keys(convertedData.seriesData).map((key, index) => ({
    name: key,
    type: "line",
    data: convertedData.seriesData[key],
    lineStyle: {
      color: copy_colorArr[index % copy_colorArr.length],
    },
    // tooltip: {
    //   valueFormatter: function(value, params) {
    //     const seriesName = params.seriesName;
    //     console.log("====seriesName===========", value, params);
    //     // if(Object.keys(replacingDataWithCurves2).includes(seriesName)){
    //     //   return replacingDataWithCurves2[seriesName]?.[0]
    //     // }
        
    //     // 默认处理
    //     return 'value';
    //   }}
  })),
}

<RNEChartsPro
enableParseStringFunction
key={${JSON.stringify(account || {})}_charts}
// style={styles__.echarts}
option={options}
height={280}
width={screenWidth * 0.95}
/>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions