ECharts 增加Zoom,整行包括右边的Text一起滑动

Question

​​

https://ppchart.com/#/detail/xz3RJ015k

增加Zoom,整行包括旁边的Text跟着一起滑动，
(可以的话Zoom放到左边，上面X轴的刻度线显示出来)

Answer 1

data = [
  {
    name: "姓名1",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名2",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名3",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名4",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名5",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名6",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名7",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名8",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名9",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名10",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名11",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名12",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名13",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名14",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名15",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名16",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  },
  {
    name: "姓名17",
    value: (Math.random() * 10).toFixed(0),
    sum: 10,
  }
];

getArrByKey = (data, k) => {
  let key = k || "value";
  let res = [];
  if (data) {
    data.forEach(function (t) {
      res.push(t[key]);
    });
  }
  return res;
};

opt = {
  index: 0,
};
color = ["#FC619D", "#FF904D", "#48BFE3"];
data = data.sort((a, b) => {
  return b.value - a.value;
});

option = {
  grid: {
    top: "2%",
    bottom: "2%",
    right: "2%",
    left: "2%",
    containLabel: true,
  },
  xAxis: {
    show: true,
    scale: true,
  },
  yAxis: [
    {
      show: true,
      inverse: true,
      data: getArrByKey(data, "name"),
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "#666",
        align: "right",
        margin: 20,
        fontSize: 13,
        formatter: function (value, index) {
          return (
            value +
            "       错误个数：" +
            data[index].value +
            "个    正确率：" +
            ((data[index].value / data[index].sum) * 100).toFixed(2) +
            "%"
          );
        },
      },
    },
  ],
  dataZoom: [
    {
      type: "slider",
      yAxisIndex: 0,
      start: 0,
      end: 100,
    },
  ],
  series: [
    {
      name: "条",
      type: "bar",
      yAxisIndex: 0,
      data: data,
      zlevel: 1,
      barWidth: 10,
      itemStyle: {
        color: function (val) {
          if (val.dataIndex < 3 && opt.index === 0) {
            return color[val.dataIndex];
          } else {
            return "#1990FF";
          }
        },
        barBorderRadius: 30,
      },
    },
  ],
};

option