echarts柱状图上方显示数值

最新推荐文章于 2025-05-30 08:59:48 发布

原创最新推荐文章于 2025-05-30 08:59:48 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

Vue 专栏收录该内容

62 篇文章

订阅专栏

本文介绍如何使用ECharts库创建一个条形图系列，展示计划任务的完成情况。通过渐变颜色和自定义样式，清晰地呈现每个任务的进度，适用于项目管理或数据分析可视化。

series: [
  {
    name: "计划",
    type: "bar",
    // stack: "Total",
    data: [],
    barWidth: 30,
    itemStyle: {
      normal: {
        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(13, 183, 211, 0.6)",
          },
          {
            offset: 1,
            color: "rgba(13, 183, 211, 0)",
          },
        ]),
        barBorderRadius: 2,
        label: {
			show: true, //开启显示
			position: 'top', //在上方显示
			textStyle: { //数值样式
				color: '#fff',
				fontSize: 24
			}
		}
      },
    },
  }
]