echart 柱状图带背景且柱状条顶端显示文字的效果

最新推荐文章于 2024-06-26 11:40:28 发布

浪漫的程序猿

最新推荐文章于 2024-06-26 11:40:28 发布

阅读量2.8k

点赞数

分类专栏： js 与框架类

本文链接：https://blog.csdn.net/oXiangZuoZuo12345/article/details/104698280

版权

本文展示了如何使用ECharts创建一个带有背景色的柱状图，并在每个柱状条顶端显示文字。通过在series配置中添加两个柱状图数据，可以实现这种效果。

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

效果图如下

实现此效果需要在series里面写2个柱状图信息，

//一个真正的数据显示
var barData = [100,90,80,70,60,50]
//通过changeData函数返回一个数组，该数组存放的数据全部是barData数组
//的最大值那个数，例如[100,100,100,100,100]

 changeData: function (data) {
            var max = 0, bgData = [];
            $.each(data, function (i, v) {
                if (max < Number(v)) max = v;
            })
            $.each(data, function (i, v) {
                bgData.push(max)
            })
            return bgData;
  }

//一个是背景图的，
var bgData = changeData(barData);

下面是series的代码
            series : [

                    //背景的
                    {
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            barBorderRadius:6,