echart 格式化水平坐标 tooltip数据

在做图表的时候，总是会遇到提示的内容和水平的内容格式不统一。然后每次都要做两次处理，鼠标滑过的提示x坐标内容 和 水平x显示的刻度要不一样，或者把外部的数据传入到内部进行切割。

更好的做法，提示的显示全部，水平的刻度单独做处理。

xAxis: [
    { 
      type: "category", 
      axisLabel: { 
          formatter: (value) => {
            const val = value?.split(' ')[1]?.split(':')[0] // 2026-1-20 20:00
          return val
        }
      },
      axisTick: { show: false }, data: [] 
    }
  ],

// 提示内容 - 适合小程序的配置样式

tooltip: {

    trigger: "axis",

    borderColor: '#eee', // 设置边框颜色为透明

    shadowOffsetX: 0, // 不使用水平偏移

    shadowOffsetY: 0, // 不使用垂直偏移

    valueFormatter,

    // position: ['30%', '30%'],

    textStyle:{

      fontSize: 11, // 设置字体大小

 

  　　textShadowColor:'transparent', // 阴影

  　　textShadowBlur:10

    }

  }

 移动端提示框内部 有阴影，去掉的方式设置 textShadowColor:'transparent'。

 

设置 坐标的数据最小值不为0，设置如下 yAxis: [{ type: "value", min: 'dataMin', max: 'dataMax', }], 防止有小数点，取证用这个方式 ：yAxis: { type: "value", scale: true }。

 

设置多个Y坐标的方式如下： 在series设置 yAxisIndex: 1 ，要显示坐标的方式如下：axisLine: {show: true}, 

 

列表横坐标空数据，那就设置为空显示。

    const option = {
        title: {
          text: '暂无数据',
          x: 'center',
          y: 'center',
          textStyle: { fontSize: 16 }
        }
      };
      // 方法1：禁用合并（推荐）
      chart.setOption(option, true);

 

设置水平线的方式。

再一个series数据中某一个类型中设置如下的。

series: [
    {
          markLine: {
            data: [
              { yAxis:maxData, name: '最小值', lineStyle: { color: 'red', type: 'dashed' } }, // 最小值2，红色虚线
              { yAxis: minData, name: '最大值', lineStyle: { color: 'red' , type: 'dashed'} }
            ]
          }

    }
    
]