echart单杠使图表标签外条

问题描述 投票:0回答:0

在echarts版本:5.3.3

是否可以像图中这样在酒吧外制作标签(参见数字 630230、131744 等)

我可以用这个 codesandbox https://codesandbox.io/s/echart-demo-histogram-manage-forked-ujjwvs?file=/src/App.tsx 就像下图一样,标签是来到酒吧后,

我喜欢把标签放在图表外面,就像第一张图片一样,以前有人能做到吗?

在此先感谢您的帮助。

const options = {
  title: {
    text: "World Populationss",
    show: false
  },
  tooltip: {
    trigger: "axis",
    show: false,
    axisPointer: {
      type: "none"
    }
  },
  legend: { show: false },
  grid: null,
  xAxis: {
    type: "value",
    show: false,
    axisLine: {
      show: false
    },
    z: 2,
    axisTick: {
      show: false
    },
    axisLabel: {
      formatter: "{value}",
      color: "#FFF", //var(--primary-text-color)
      inside: false,
      // ...
      show: true
    }
    // boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: "category",
    data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
    show: true,
    position: "left",
    axisLine: {
      show: false
    },
    z: 3,
    axisTick: {
      show: false
    },
    axisLabel: {
      color: "#FFF", //var(--primary-text-color)
      inside: true,
      // ...
      show: true
    },
    nameLocation: "start"
  },
  series: [
    {
      name: "2022",
      type: "bar",
      data: [18203, 23489, 29034, 104970, 131744, 630230],
      label: {
        show: true,
        position: "top",
        formatter: "{c}",
        // position:"insideRight",
        position: ["100%", "50%"]
      },
      yAxis: {
        position: "top"
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#008D8E" // --histogram-item-gradient-background
            },
            {
              offset: 1,
              color: "#24C1C3" // color at 100%
            }
          ],
          global: false // default is false
        },
        borderRadius: 4,
        normal: {
          label: {
            show: true,
            position: "outside"
          }
        }
      }
    }
  ]
};
const App: React.FC = () => {
  return (
    <ReactECharts
      theme={"dark"}
      style={{ height: 400, width: 400 }}
      option={options}
      opts={{ renderer: "svg" }}
    />
  );
};

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

javascript echarts
© www.soinside.com 2019 - 2024. All rights reserved.