有人遇到过echarts自动排序后tooltip和Y轴对不上怎么解决吗

有人遇到过echarts自动排序后tooltip和Y轴对不上怎么解决吗
这种情况：后面的值是对得上的，但是名字跟y轴对不上，是混乱的。有什么办法可以调回来呢。

var cate = [
        "0001",
        "0002",
        "0003",
        "0004",
        "0005",
        "0006",
        "0007",
        "0008",
        "0009",
        "0010",
      ];
      //数据值，顺序和Y轴的名字一一对应
      var barData = [730, 801, 924, 1259, 1600, 411, 1090, 888, 466, 877];
      var option = {
        title: {
          text:  "合格率排行榜top10",
        },
        tooltip: {
          trigger: "axis",
          
          axisPointer: {
            type: "shadow",
          },
        },
        //图表位置
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        //X轴
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //不显示X轴刻度线和数字
          splitLine: { show: false },
          axisLabel: { show: false },
        },
        yAxis: {
          type: "category",
          data: cate,
          //升序
          inverse: true,
          splitLine: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //key和图间距
          offset: 10,
          //动画部分
          animationDuration: 300,
          animationDurationUpdate: 300,
          //key文字大小
          nameTextStyle: {
            fontSize: 5,
          },
        },
        series: [
          {
            //柱状图自动排序，排序自动让Y轴名字跟着数据动
            realtimeSort: true,
            name: "数量",
            type: "bar",
            data: barData,
            barWidth: 14,
            barGap: 10,
            smooth: true,
            valueAnimation: true,
            //Y轴数字显示部分
            label: {
              normal: {
                show: true,
                position: "right",
                valueAnimation: true,
                offset: [5, -2],
                textStyle: {
                  color: "#333",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              //颜色样式部分
              normal: {
                barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#3977E6" },
                  { offset: 1, color: "#37BBF8" },
                ]),
              },
            },
          },
        ],
        //动画部分
        
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      };

去掉tooltip 配置项 就可以了

这个情况一般都是改变图表尺寸，或者是容器大小发生改变，echarts官方提供了resize()。官网API：https://echarts.apache.org/zh/api.html#echartsInstance.resize

var cate = [
  "0001",
  "0002",
  "0003",
  "0004",
  "0005",
  "0006",
  "0007",
  "0008",
  "0009",
  "0010",
];
//数据值，顺序和Y轴的名字一一对应
const barData = [730, 801, 924, 1259, 1600, 411, 1090, 888, 466, 877];
 let v=barData.sort(function(a,b){
   return b-a;
 });
var option = {
  title: {
    text: "合格率排行榜top10",
  },
  tooltip: {
    trigger: "axis",

    axisPointer: {
      type: "shadow",
    },
  },
  //图表位置
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  //X轴
  xAxis: {
    type: "value",
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    //不显示X轴刻度线和数字
    splitLine: { show: false },
    axisLabel: { show: false },
  },
  yAxis: {
    type: "category",
    data: cate,
    //升序
    inverse:true,
    splitLine: { show: false },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    //key和图间距
    offset: 10,
    //动画部分
    animationDuration: 300,
    animationDurationUpdate: 300,
    //key文字大小
    nameTextStyle: {
      fontSize: 5,
    },
  },
  series: [
    {
      //柱状图自动排序，排序自动让Y轴名字跟着数据动
      // realtimeSort: true,
      name: "数量",
      type: "bar",
      data: v,
      barWidth: 14,
      barGap: 10,
      smooth: true,
      valueAnimation: true,
      //Y轴数字显示部分
      label: {
        normal: {
          show: true,
          position: "right",
          valueAnimation: true,
          offset: [5, -2],
          textStyle: {
            color: "#333",
            fontSize: 13,
          },
        },
      },
      itemStyle: {
        emphasis: {
          barBorderRadius: 7,
        },
        //颜色样式部分
        normal: {
          barBorderRadius: 7,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#3977E6" },
            { offset: 1, color: "#37BBF8" },
          ]),
        },
      },
    },
  ],
  //动画部分

  animationDuration: 0,
  animationDurationUpdate: 3000,
  animationEasing: "linear",
  animationEasingUpdate: "linear",
};

你可以把这个复制到 这个 里面 可以看到效果
realtimeSort 属性 的问题

EChartsDemo集 EChartsDemo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com https://www.isqqw.com/echartsdetail?id=15028

利用 formatter 自定义吧