Echart柱状图-柱子顶部显示数值/显示图标

柱子顶部显示数值效果

柱子顶部显示数值＋图标

import EchartInit from '@/components/EchartInit';const IMG = ['https://scpic.chinaz.net/Files/pic/icons128/8328/h1.png','https://scpic.chinaz.net/Files/pic/icons128/8319/w2.png','https://img0.baidu.com/it/u=3119542616,1165410720&fm=26&fmt=auto','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F061H0102U6%2F20061G02U6-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644314407&t=aa49089b06c80ff5c9e3404d3ec85382','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21042G339292K3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644314407&t=e3a817c74754fdade94aa51858689928','https://scpic.chinaz.net/Files/pic/icons128/8308/d5.png','https://scpic.chinaz.net/Files/pic/icons128/8304/e7.png','https://sc.chinaz.com/tubiao/220108527280.htm',
]
export default function BarEchart(props: any) {const options = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisLabel: {formatter: (value) => {return value + '\n'+'{' + value + '| }';},rich: {Mon: {height: 40,width: 40,backgroundColor: {image: IMG[0]}},Tue: {height: 40,width: 40,backgroundColor: {image: IMG[1]}},Wed: {height: 40,width: 40,backgroundColor: {image: IMG[2],},},Thu: {height: 40,width: 40,backgroundColor: {image: IMG[3],},},Fri: {height: 40,width: 40,backgroundColor: {image: IMG[4],},},Sat: {height: 40,width: 40,backgroundColor: {image: IMG[5],},},Sun: {height: 40,width: 40,backgroundColor: {image: IMG[6],},}}}},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',label: {show: true,position: 'top',formatter: (value,index)=> {console.log('value',value,value?.dataIndex);  return value?.value + '{'+ 'icon' + '| }';},rich: {icon : {height: 20,width: 20,backgroundColor: {image: IMG[0]}}}},}]};return (<div style={{height :300, width:'100%'}}><EchartInit options={options} /></div>)
}

Echart柱状图-柱子顶部显示数值/显示图标相关推荐

echarts柱状图柱子上方数据标签显示
echarts柱状图柱子上方数据标签显示如图开启显示,也可以修改样式.
Echarts柱状图(顶部和内部的数值显示)/(内部数值的百分比计算)/(顶部显示多行数据)/(柱体圆角)
先看效果: 如何实现顶部和内部的数值显示并且计算出两个柱状图的百分比: 首先是全部源码: <div ref="country" id="country" ...
python横向柱状图-python画柱状图--不同颜色并显示数值的方法
用python画柱状图容易,但是如何对不同柱子使用不同颜色呢?同时在柱子顶端显示精确数值? 主要用的方法为: atplotlib.pyplot.bar(left, height, width=0.8, ...
python画柱形图显示数值_python画柱状图--不同颜色并显示数值的方法
用python画柱状图容易,但是如何对不同柱子使用不同颜色呢?同时在柱子顶端显示精确数值? 主要用的方法为: atplotlib.pyplot.bar(left, height, width=0.8, ...
php柱形图上显示数字怎么改回来,sigmaplot可以在柱状图上显示数值
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:sigmaplot可以在柱状图上显示数值? 问题详情:sigmaplot可以在柱状图上显示数值?回答:[求助] 柱状图上如何让数值和 ...
python绘制直方图显示数字_Python实现绘制双柱状图并显示数值功能示例
本文实例讲述了Python实现绘制双柱状图并显示数值功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #! python3 import matplotlib.py ...
python画并列柱状图-Python实现绘制双柱状图并显示数值功能示例
本文实例讲述了Python实现绘制双柱状图并显示数值功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #! python3 import matplotlib.py ...
python绘制柱状图横向显示_Python实现绘制双柱状图并显示数值功能示例
本文实例讲述了Python实现绘制双柱状图并显示数值功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #! python3 import matplotlib.py ...
echart柱状图Y轴最小间隔问题,Y轴不显示小数
今天来说说echart 柱状图 Y轴的最小值.间隔问题. 最近项目中用到柱状图,数据量少的时候,Y轴会出现小数,但是我们产品小哥哥说不能出现小数,好了,那就开干! option = {xAxis: { ...

Echart柱状图-柱子顶部显示数值/显示图标

Echart柱状图-柱子顶部显示数值/显示图标相关推荐

最新文章

热门文章