帶序號的echart

    let option = {
      backgroundColor: "transparent",
      grid: {
        left: '50',
        right: '80',
        bottom: 0,
        top: 20,
        containLabel: false,
      },
      xAxis: [{
        gridIndex: 0,
        type: 'value',
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      },
      {
        gridIndex: 0,
        type: 'value',
        max: 100,
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      },
      ],
      yAxis: [
        {
          type: 'category',
          inverse: true,
          gridIndex: 0,
          position: 'left',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: '18',
            },
            margin: 40,
            width: 100,
            align: "left",
            overflow: "truncate",
            formatter: (name, index) => {
              let a = myResource.length
              if (index === a - 1) {
                return `{five|${index + 1}}`
              }
              return `{four|${index + 1}} `
            },
            rich: {
              // 一位數
              four: {
                backgroundColor: "#1466ac",
                color: "white",
                width: 20,
                height: 30,
                padding: [1, 0, 0, 10],
                borderRadius: 20,
                fontSize: 16,
                position: 'left',
              },
              // 兩位數
              five: {
                backgroundColor: "#1466ac",
                color: "white",
                width: 25,
                height: 30,
                padding: [1, 0, 0, 5],
                borderRadius: 20,
                fontSize: 16,
              }
            }
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          // data: className,
        },
        //      左側上方名稱
        {
          type: 'category',
          offset: 0,
          position: "left",
          axisLine: {
            show: false
          },
          inverse: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            align: "left",
            verticalAlign: "bottom",
            // lineHeight: 44,
            // color: 'red',
            textStyle: {
              color: ' rgba(255,255,255,0.65)',
              fontSize: '16',
            },
            triggerEvent: true,
            formatter: params => {
              let str = ''
              for (let index = 0; index < params.length; index++) {
                if (index === 3) {
                  str += ' <br />'
                } else {
                  str += params[index]
                }
              }
              return str
              // return `<div> ${params.length > 2 ? params.substring(0, 40) + "..." : params} <div>`
            }
          },
          data: myResource.map(v => v.xyzymcgfgf)  // ['空調濾清器', '碳纖維輪轂', '輪胎鎖', '輪胎密封膠', '動力輪轂']
        },
        {
          // 右側
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: 'rgba(42,247,255,0.65)',
              fontSize: '16',
            },
            formatter: function (value) {
              return value + '人'
            },
          },
          data: myResource.map(v => v.num),
        },
      ],
      series: [
        {
          type: 'bar',
          xAxisIndex: 0,
          yAxisIndex: 0,
          barWidth: 6,
          silent: true,
          label: {
            show: true,
            offset: [10, -16],
            fontSize: 16,
            fontWeight: 400,
            position: 'left',
            align: 'left',
          },
          itemStyle: {
            emphasis: {
              barBorderRadius: [0, 20, 20, 0],
            },
            data: myResource.map(v => v.xyzymcgfgf),
            normal: {
              barBorderRadius: [0, 20, 20, 0],
              color: function (param) {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [{
                    offset: 0,
                    color: '#00C0FD00', // 0% 處的顏色
                  },
                  {
                    offset: 1,
                    color: '#00C0FD', // 100% 處的顏色
                  },
                  ],
                  false
                )
              },
            },
          },
        },
        {
          name: '人數',
          type: 'bar',
          xAxisIndex: 0,
          yAxisIndex: 0,
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 5, 5],  // 圓角
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#188CE7',
                },
                {
                  offset: 0.5,
                  color: '#2AF7FF'
                },
                {
                  offset: 1,
                  color: '#FFC800',
                },
              ]),
            },
          },
          barWidth: 10, // 柱狀圖寬
          barGap: 4, // 間距
          data: myResource.map(v => Number(v.num)),
        },
        // {
        //   name: '灰色柱狀圖',
        //   type: 'bar',
        //   barWidth: 10,
        //   barGap: '-100%',
        //   data: myResource.map(v => 300),
        //   itemStyle: {
        //     normal: {
        //       color: 'rgba(0, 151, 251, 0.2)',
        //       barBorderRadius: [0, 20, 20, 0],
        //     },
        //   },
        // },
      ],
    }
    const myChart = echarts.getInstanceByDom(RightBottomLineRef.current) ?? echarts.init(RightBottomLineRef.current, ECHARTS_THEME)
    myChart.clear()
    myChart.setOption(option)
    window.onresize = () => {
      myChart.resize()
    }