响应式react-echarts中标签的动态定位

Question

我有一个使用 echarts-for-react 的 React Web 应用程序。我已经设置了准确反映我的 UI 要求的值，但当我使其响应时问题就开始了。标签的位置、偏移和距离是固定数值而不是百分比。因此，当我调整屏幕大小时，图表也会随之调整。标签位置发生变化。有什么办法可以修复它，以便在更改尺寸时，标签的位置可以正确更改而不会错位???

`

import ReactEcharts from "echarts-for-react"

var builderJson = {
  "all": 100,
  "total": 1000,
  "charts": {
    "A": 10,
    "B": 20,
    "C": 30
  },
};
const options = {
     
    grid: {
        containLabel: true,
        height: '60%'
    },
    xAxis: {
      show : false,
      type: 'value'
    },
    yAxis: {
       data: Object.keys(builderJson.charts),
       type: 'category',
       axisLabel: {
            show: false,
        },
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false,
        }
    },
    series: [
        {
            color: 'blue',
            type: 'bar',
            barCategoryGap: '10%',
            barWidth: '40%',
            stack: 'total',
            groupPadding: 3,
            label: {
              color: 'black',
              position: [0, -16],
              formatter: function(param) { return param.name },
              show: true
            },
            itemStyle: {
                borderRadius: [0, 2, 2, 0],
            },
            data: Object.keys(builderJson.charts).map(function (key) {
                return builderJson.charts[key];
            })
        },
        {
            type: 'bar',
            barWidth: '40%',
            stack: 'total',
            barCategoryGap: '10%',
            color: 'whitesmoke',
            groupPadding: 3,
            label: {
                show: true,
                distance: 15,
                position: 'insideBottomRight',
                offset: [-50, 0],
                color: 'grey',
                formatter: function(params) { return builderJson.all - params.value + '%' }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
                return builderJson.all - builderJson.charts[key];
            })
        },
        {
            type: 'bar',
            stack: 'total',
            barWidth: '40%',
            barCategoryGap: '10%',
            color: 'whitesmoke',
            groupPadding: 3,
            label: {
                show: true,
                position: 'insideBottomRight',
                offset: [20,-10],
                formatter: function(params) { return builderJson.total }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
                return 0;
            })
        }
    ]
  
}

function App() {
  return (
    <ReactEcharts
      option={options}
      style={{ 
        width: "100%", height: "100vw" 
      }}
    ></ReactEcharts>
  )
}

export default App

`

在一定的高度和宽度缩放下给出以下输出：-

但是当高度改变时，标签被放置在错误的位置：-

关于如何解决这个问题有任何帮助吗？

Answer 1

您可以使用 labelLayout 属性调整标签的位置，如下所示

...
...
 series: [
  {
    name: '',
    label: '',
    labelLayout: (params)=>{
      return {
        y: params.rect.y - 100,
        x: params.rect.x - 85,
        draggable: true
      }
    },
    type: '',
    yAxisIndex: 0,
    data: '',
    color: '',
  },
...
...

params.rect.y和params.rect.y表示每个标签的坐标。这可能无法直接回答您的问题。但希望这能给你一些见解。