echarts柱状图顶部添加图片

最近有个需求，在特定柱状图顶部要求展示图片，搜了下关于这方面的文章比较少，来记录下。

series:[
...markPoint:{symbol:'image://url',//url替换成你的图片地址symbolSize:10,//图片大小symbolOffset:[0,-20],//图片相对于柱形图x,y轴偏移量，注意要往上移y要是负的data:[{coord:[0,8000]//需要展示图片的柱型索引，y轴的value}],label:{show:false,//顶部默认会展示y轴的值，可以设置false,不展示}}
...
]

也可以这样写：

    markPoint:{//只放顶部需要展示图片的数据data:[{symbol:"image://../../static/images/aaa.png",//放图片路径 注意前面要写 image://xAxis:index,//放需要展示图片的x轴索引yAxis:stepNum,//y轴对应的值symbolOffset:['-3%',0]//图片相对于柱形图的偏移量},{symbol:"image://../../static/images/aaa.png",//放图片路径 注意前面要写 image://xAxis:index,//放x轴索引yAxis:stepNum,//y轴对应的值symbolOffset:['-3%',0]//图片相对于柱形图的偏移量},{symbol:"image://../../static/images/aaa.png",//放图片路径 注意前面要写 image://xAxis:index,//放x轴索引yAxis:stepNum,//y轴对应的值symbolOffset:['-3%',0]//图片相对于柱形图的偏移量},{symbol:"image://../../static/images/aaa.png",//放图片路径 注意前面要写 image://xAxis:index,//放x轴索引yAxis:stepNum,//y轴对应的值symbolOffset:['-3%',0]//图片相对于柱形图的偏移量}],label:{show:false,//顶部默认会展示y轴的值，可以设置false,不展示}}

文档其实描述的很详细了，参考地址：https://echarts.apache.org/zh/option.html#series-pie.markPoint.symbol

echarts柱状图顶部添加图片相关推荐

【echarts柱状图保存为图片并下载】
echarts柱状图保存为图片并下载直接附上代码直接附上代码页面中设置下载柱状图按钮,带上下载图片名称. Mon 06Mon 13Mon 20获取url 截取base64 转blob 下载解 ...
Echarts柱状图(顶部和内部的数值显示)/(内部数值的百分比计算)/(顶部显示多行数据)/(柱体圆角)
先看效果: 如何实现顶部和内部的数值显示并且计算出两个柱状图的百分比: 首先是全部源码: <div ref="country" id="country" ...
echarts柱状图顶部数据显示气泡
效果图: 动效代码: <template><div ref="mood" style="{width: 1200px;height: 490px}&q ...
echarts柱状图柱体使用图片
效果图: 直接上代码: let option = {color: ["#bb0004", "#FFD48A"],tooltip: {trigger: " ...
echarts柱状图顶部与柱体中同时显示数值
大概是这种需求配置 // 数值部分const xAxisValue = ['3-26','3-28','3-29','4-3','4-8']; // x轴数值const sleepTimeChart ...
echarts 柱状图如何添加点击事件
我现在已经用echarts 绑定了一组数据出现了这样的一个图如何点击柱子跳转到响应的页面呢? 只需要在这个方法里面加上几句代码就行: //这个是数据绑定的方法 // option 是绑定的数据 ...
Echarts柱状图顶部加数量显示
//加在series中itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#615a5a ...
ECharts Title文字前添加图片
项目需要被逼无奈开始了对ECharts研究和使用问题:在ECharts Title前添加图片废话不多说,直接上代码 : title: {text: ' {a| 动态数据}',show: true, ...
echarts 柱状图添加排序图标/序号
echarts 柱状图添加排序图标/序号一.实现效果二.核心代码(图片序号) 三.核心代码(文字序号) 四.源码(这里用了vue) 一.实现效果使用echarts的柱状图实现下面效果,须在名称前 ...

echarts柱状图顶部添加图片

echarts柱状图顶部添加图片相关推荐

最新文章

热门文章