echarts进阶--柱状图显示不同的颜色，X轴下方不显示，X轴标签名和数值显示在X轴上方

最新推荐文章于 2024-09-25 16:05:55 发布

银子先生

最新推荐文章于 2024-09-25 16:05:55 发布

阅读量2.8k

点赞数 3

分类专栏： echarts 文章标签： html vue.js echarts

本文链接：https://blog.csdn.net/z1093541823/article/details/124252928

版权

echarts 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

echarts进阶

柱状图显示不同的颜色，X轴下方不显示，X轴标签名和数值显示在X轴上方；

效果图：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>环保2</title>
    <!--引入echarts-->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <style type="text/css">
    </style>
</head>

<body>
    <div class="showContent" id="goodsDay" style="width: 800px; height: 400px;">
    </div>

    <script type="text/javascript">
        //优良天数
        // 基于准备好的dom，初始化echarts实例
        var goodsDay = echarts.init(document.getElementById('goodsDay'));
        // 指定图表的配置项和数据
        var option = {
            xAxis: [
                {
                    type: 'category',
                    //这是设置的false，就不不显示下方的x轴，默认是true的
                    show: false,
                    data: ['A组','B组','C组','D组','E组','F组','G组','H组','I组','J组','K组'],
                    axisLabel: {
                        interval: 0
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '数量',
                    //下面是显示格式化，一般来说还是用的上的
                    axisLabel: {
                        formatter: '{value} 天'
                    }
                }
            ],
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: function (params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },
                            //以下为是否显示，显示位置和显示格式的设置了
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{b}\n{c}'
                            }
                        }
                    },
                    data: [28, 15, 9, 4, 7, 8, 23, 11, 17, 11, 17]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        goodsDay.setOption(option);
    </script>
</body>

</html>