echarts中柱形图 series-barmarkPoint实现一个效果最大值显示markPoint且柱形图上方有个坐标icon为base64图片再上面有个文字xxx然后颜色是紫色的
在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
中的文字替换为你想要显示的文字。
希望可以帮助到你

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