echarts--柱状图每个柱子和图例对应，给数值和纵坐标自定义添加'%'

最新推荐文章于 2025-06-21 15:04:44 发布

置顶 songywaa

最新推荐文章于 2025-06-21 15:04:44 发布

阅读量1.5w

点赞数 9

CC 4.0 BY-SA版权

分类专栏：前端文章标签： echarts

本文链接：https://blog.youkuaiyun.com/weixin_42288182/article/details/90600358

前端专栏收录该内容

43 篇文章

订阅专栏

博客围绕ECharts柱状图展开，提出了柱子内容与图例对应且颜色一致、纵坐标和柱子上方数值添加'%'、图例显示在右边并设置位置等需求，随后直接给出实现代码，还提醒看代码注释及引入相关文件，欢迎留言交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单描述需求：

1、每个柱子表示的内容和图例对应，并且相对应的柱子和图例颜色一致；
2、纵坐标和柱子上边数值都需要添加’%’；
3、图例显示在右边，涉及到位置设置；

看下图，是你想要的柱状图吗？
在这里插入图片描述

接下来直接上代码

！！！重点看代码中的注释

不要忘记引入echarts.min.js和jquery.min.js哦！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>柱状图</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body style="background:#000;">
    <div id="bar" style="width:500px;height: 250px;"></div>
    <script type="text/javascript">
    var bar_data = [12,23,34,43,33,23,11,22,6]; //模拟数据
    var chart = echarts.init(document.getElementById('bar'));
    var option = {
        tooltip : {
            formatter: '{a}:{c}%'//a 是series中每条数据name值，c 是data数值
        },
        legend: {
            orient: 'vertical', // 'horizontal'
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'],
            textStyle: {  // 图列内容样式
                color: '#fff',  // 字体颜色
            },
            x: '70%',//图例位置，设置right发现图例和文字位置反了，设置一个数值就好了
            y: 'center'//延Y轴居中
        },
        grid: {
            left: '3%',
            right: '30%',
            top: '3%',
            bottom:'3%',
            containLabel: true
        },
        xAxis : [ //横坐标
            {
                type : 'category',
                data : [''],
                axisLine: {
                    lineStyle: {
                        color: "#fff",//横坐标线条颜色
                    }
                }
            }
        ],
        yAxis : [ //纵坐标
            {
                type : 'value',
                axisLabel: {
                    show:true,
                    formatter: '{value}%',//给Y轴数值添加百分号
                },
                axisLine: {
                    lineStyle: {
                        color: "#fff",//纵坐标线条颜色
                    }
                }
            }
        ],
        color:['#0287f8','#269cff','#58b1fc','#2fb6f6','#03cdfa','#3ed9fc','#05f6f6','#47fefe','#7dfcfc','#a9ffff'],//柱状图的颜色
        series : [
            {name:'直接访问'},
            {name:'邮件营销'},
            {name:'联盟广告'},
            {name:'视频广告'},
            {name:'搜索引擎'},
            {name:'百度'},
            {name:'谷歌'},
            {name:'必应'},
            {name:'其他'}
        ]
    };

    for(var i = 0; i< option.series.length; i++){
        var style = { //定义柱状图的样式
            normal: {
                label: {
                    show: true,
                    position: 'top', //柱子上方显示 数值
                    formatter: '{c}%' //数值加上'%'
                }
            }
        };
        option.series[i].type = 'bar'; //每条数据指定类型为'bar'
        option.series[i].itemStyle = style; // series中每条数据都加的样式
        option.series[i].data = [bar_data[i]]; //series 中 data赋值
    };

    chart.setOption(option);
    </script>
</body>
</html>