在 Echarts 中,可以使用'series-bar.markPoint'来实现最大值显示 markPoint 的效果。同时,在柱形图上方添加一个坐标 icon 为 base64 图片,再添加一个文字'xxx',并将其颜色设置为紫色,可以使用'graphic'组件来实现。

以下是一个示例代码,实现了上述效果:

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'bar',
      data: [10, 20, 30, 40, 50],
      markPoint: {
        symbol: 'pin', // markPoint 的图标形状,可以设置为'pin'来显示大头针形状
        symbolSize: 50, // markPoint 的图标大小
        data: [
          {
            type: 'max', // 显示最大值的 markPoint
            name: '最大值',
          },
        ],
      },
    },
  ],
  graphic: [
    {
      type: 'image', // 图片
      id: 'icon',
      left: 'center',
      top: 'middle',
      style: {
        image: 'data:image/png;base64,XXX', // 替换成你的 base64 图片
        width: 30,
        height: 30,
      },
    },
    {
      type: 'text', // 文字
      id: 'text',
      left: 'center',
      top: 'middle',
      style: {
        text: 'xxx', // 替换成你的文字
        fill: 'purple', // 文字颜色为紫色
        font: '14px Arial',
      },
    },
  ],
};

其中,'graphic'数组中的第一个对象表示图片,'graphic'数组中的第二个对象表示文字。你需要将'image'的'base64'字符串替换为你自己的图片的'base64'字符串,将'text'中的文字替换为你想要显示的文字。

希望可以帮助到你。

Echarts 柱形图 最大值 MarkPoint 显示及自定义图标文字

原文地址: https://www.cveoy.top/t/topic/qx3H 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录