echarts柱状图的宽度

weixin_53545517

已于 2022-05-17 15:59:48 修改

阅读量1.9w

点赞数 10

文章标签： echarts

于 2021-10-13 09:54:00 首次发布

本文链接：https://blog.csdn.net/weixin_53545517/article/details/120737947

版权

这篇博客展示了如何使用Echarts库创建带有圆角和渐变颜色的柱状图。通过设置`barBorderRadius`实现圆角效果，并利用`LinearGradient`创建从蓝色到深蓝色的平滑渐变。同时，配置了标签显示在柱子右侧，展示地块面积数据。

摘要由CSDN通过智能技术生成

series: [
          {
            name: "地块面积",
            type: "bar",
            barWidth: 15, // 柱子宽度
            label: {
              show: true,
              position: "right", // 位置
              color: "#8E8E8E",
              fontSize: 14,
              distance: 15, // 距离
              formatter: "{c} 平方米" // 这里是数据展示的时候显示的数据
            }, // 柱子上方的数值
            itemStyle: {
              barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

              color: new this.$echarts.graphic.LinearGradient(
                1,
                0,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#51C5FD"
                  },
                  {
                    offset: 1,
                    color: "#005BB1"
                  }
                ],
                false
              ) // 渐变
            },
            data: Ydata
          }
        ]