Skip to content

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

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}
/>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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