echarts柱状图顶部与柱体中同时显示数值

大概是这种需求

配置

// 数值部分const xAxisValue = ['3-26','3-28','3-29','4-3','4-8']; // x轴数值const sleepTimeChart  = {// 顶部数值afterAsleepArr:[51,58,53,31,32],// 柱中百分比数值afterAsleepPercent:[11,13,11,8,7]}// 配置部分const option = {backgroundColor: 'rgba(255, 255, 255, 1)',grid: {x: 30,y: 10,x2: 30,y2: 35},xAxis: {type: 'category',// x轴数据data: xAxisValue,axisLabel: {fontSize: 10,color:'#333',fontWeight:'bold',}},yAxis: {type: 'value',axisLabel: {fontSize: 10,color:'#333',fontWeight:'bold',formatter: '{value}m'},axisLine:{show:true,},},series: [{data: sleepTimeChart.afterAsleepArr,type: "bar",label: {show: true,formatter:  (a)=>{return sleepTimeChart.afterAsleepPercent[a.dataIndex]+'%'},},itemStyle:{color:'#1b4993'},markPoint: {symbolSize: 0,data: [{ coord: [0, sleepTimeChart.afterAsleepArr[0]] }, { coord: [1, sleepTimeChart.afterAsleepArr[1]] }, { coord: [2, sleepTimeChart.afterAsleepArr[2]] }, { coord: [3, sleepTimeChart.afterAsleepArr[3]] }, { coord: [4, sleepTimeChart.afterAsleepArr[4]] }, { coord: [5, sleepTimeChart.afterAsleepArr[5]] }, { coord: [6, sleepTimeChart.afterAsleepArr[6]] }],label: {fontSize:10,fontWeight:"bold",show: true,position: 'top',formatter: (a)=>{return sleepTimeChart.afterAsleepArr[a.dataIndex]+'m'},}},}]};

echarts柱状图顶部与柱体中同时显示数值相关推荐

echarts柱状图值为0时不显示以及柱状图百分比展示
echarts柱状图值为0时不显示以及柱状图百分比展示 1.效果展示 2.代码 <template><div id="container"><div ...
ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局原来布局 option = {gr ...
解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
Echarts柱状图(顶部和内部的数值显示)/(内部数值的百分比计算)/(顶部显示多行数据)/(柱体圆角)
先看效果: 如何实现顶部和内部的数值显示并且计算出两个柱状图的百分比: 首先是全部源码: <div ref="country" id="country" ...
echarts柱状图顶部添加图片
最近有个需求,在特定柱状图顶部要求展示图片,搜了下关于这方面的文章比较少,来记录下. series:[ ...markPoint:{symbol:'image://url',//url替换成你的图片地 ...
Echarts柱状图顶部加数量显示
//加在series中itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#615a5a ...
echarts柱状图横向名字过长时显示省略号
实现效果: var data = ["19.60", "18.90", "13.00", "9.90", "6 ...
echarts柱状图标记异常数据，突出显示异常数据柱子
近日开发中,项目要求展示一个月的数据,但一个月中有异常的数据需要标记显示并显示出数据解决方案:增加柱状图,传入的是异常日期数据(为了标记突出,我传入的数据为异常数据*2,不异常的传入"-& ...
echarts柱状图顶部数据显示气泡
效果图: 动效代码: <template><div ref="mood" style="{width: 1200px;height: 490px}&q ...

echarts柱状图顶部与柱体中同时显示数值

大概是这种需求

配置

echarts柱状图顶部与柱体中同时显示数值相关推荐

最新文章

热门文章