Echarts 柱形图 最大值 MarkPoint 显示及自定义图标文字
在 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'中的文字替换为你想要显示的文字。
希望可以帮助到你。
原文地址: https://www.cveoy.top/t/topic/qx3H 著作权归作者所有。请勿转载和采集!