在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数组中的第二个对象表示文字。你需要将imagebase64字符串替换为你自己的图片的base64字符串,将text中的文字替换为你想要显示的文字。

希望可以帮助到你

echarts中柱形图 series-barmarkPoint实现一个效果最大值显示markPoint且柱形图上方有个坐标icon为base64图片再上面有个文字xxx然后颜色是紫色的

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

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