Echart 水平条形图使图表标签显示在条形外。

huangapple go评论57阅读模式
英文:

echart horizontal bar make chart label outside bar

问题

In echarts version:5.3.3,你是否可以使标签(参见数字 630230、131744 等)位于柱形图之外,就像图片中显示的那样?

我能够使用这个 codesandbox https://codesandbox.io/s/echart-demo-histogram-manage-forked-ujjwvs?file=/src/App.tsx 实现下面的图像,标签显示在柱形图之后,

我想保持标签位于图表之外,就像第一张图片那样,有人之前能做到吗?

提前感谢任何帮助。

英文:

In echarts version:5.3.3

Is it possible to make the label(see the numbers 630230, 131744 etc..) outside of the bar like here in the image

Echart 水平条形图使图表标签显示在条形外。

I am able to do with this codesandbox https://codesandbox.io/s/echart-demo-histogram-manage-forked-ujjwvs?file=/src/App.tsx like the below image, where the label is coming after the bar,

I like to keep the label outside of the chart like the first image, anyone able to do it before?

thanks in advance for any help.

Echart 水平条形图使图表标签显示在条形外。

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

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

export default App;

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

答案1

得分: 2

以下是翻译的内容:

就我所看到的情况,标签始终相对于柱形位置,因此没有将它们放在右侧的选项。

但是,您可以通过创建一个次要Y轴来实现您所寻找的效果,将该轴放置在绘图的右侧,并将该轴的标签设置为值本身。

还需要进行一些其他调整:

  • 将X轴的max设置为数据的最大值,以避免将最大值设置为一个会在右侧创建间隙的圆整值。
  • grid.containLabel设置为true,以确保绘图被缩放,以便次要Y轴的标签不被截断。
英文:

As far as I can see the labels are always positioned relative to the bars, so there's no option to place them to the right.

However, the effect you are looking for can be achieved by creating a secondary y axis, have that axis placed to the right of the plot and set the labels of that axis to the values themselves.

There are some other tweaks required:

  • setting the max of the x axis to the maximum value of data to avoid setting the max to a round value that will create a gap to the right.
  • setting the grid.containLabel to true to ensure the plot is scaled such that the labels of the secondary y axis are not cut off.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const data = [18203, 23489, 29034, 104970, 131744, 630230];
const myChart = echarts.init(document.querySelector(&#39;#chart&#39;), &#39;dark&#39;);
const options = {
    title: {
        text: &quot;World Populationss&quot;,
        show: false
    },
    tooltip: {
        trigger: &quot;axis&quot;,
        show: false,
        axisPointer: {
            type: &quot;none&quot;
        }
    },
    legend: { show: false },
    grid: {containLabel: true},
    xAxis: {
        type: &quot;value&quot;,
        show: false,
        axisLine: {
            show: false
        },
        max: Math.max(...data),
        z: 2,
        axisTick: {
            show: false
        },
        axisLabel: {
            formatter: &quot;{value}&quot;,
            color: &quot;#FFF&quot;, //var(--primary-text-color)
            inside: false,
            show: true
        },
        boundaryGap: [0, 0.01]
    },
    yAxis: [{
        type: &quot;category&quot;,
        data: [&quot;Brazil&quot;, &quot;Indonesia&quot;, &quot;USA&quot;, &quot;India&quot;, &quot;China&quot;, &quot;World&quot;],
        show: true,
        position: &quot;left&quot;,
        axisLine: {
            show: false
        },
        z: 3,
        axisTick: {
            show: false
        },
        axisLabel: {
            color: &quot;#FFF&quot;, //var(--primary-text-color)
            inside: true,
            // ...
            show: true
        },
        nameLocation: &quot;start&quot;
    },
    {
        type: &quot;category&quot;,
        data: data,
        position: &quot;right&quot;,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: &quot;#FFF&quot;, //var(--primary-text-color)
            inside: false,
            show: true
        },
    }],
    series: [
        {
            name: &quot;2022&quot;,
            type: &quot;bar&quot;,
            data: data,
            label: {
                show: false,

                formatter: &quot;{c}&quot;,

                position: &quot;right&quot;,
                distance: 0
            },

            itemStyle: {
                color: {
                    type: &quot;linear&quot;,
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: &quot;#008D8E&quot; // --histogram-item-gradient-background
                        },
                        {
                            offset: 1,
                            color: &quot;#24C1C3&quot; // color at 100%
                        }
                    ],
                    global: false // default is false
                },
                borderRadius: 4
                // normal: {
                //   label: {
                //     show: true,
                //     position: [&quot;100%&quot;, &quot;50%&quot;]
                //   }
                // }
            }
        }
    ]
};
myChart.setOption(options);

<!-- language: lang-html -->

&lt;div id=&quot;chart&quot; style=&quot;width: 400px;height: 400px&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

Here's a fork of your react app

huangapple
  • 本文由 发表于 2023年4月19日 19:06:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/76053779.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定