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

最新推荐文章于 2024-09-18 11:33:05 发布

weixin_45253306

最新推荐文章于 2024-09-18 11:33:05 发布

阅读量5.5k

点赞数 4

分类专栏： echarts 文章标签：数据可视化可视化 echarts

本文链接：https://blog.csdn.net/weixin_45253306/article/details/114696995

版权

大概是这种需求

在这里插入图片描述

配置


	// 数值部分
	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',