笔记：Echarts - 堆叠柱状图

最新推荐文章于 2024-05-28 10:58:28 发布

小虾Suki

最新推荐文章于 2024-05-28 10:58:28 发布

阅读量9k

点赞数

分类专栏：前端开发 echarts3-0 文章标签：图形 echarts3-0

本文链接：https://blog.csdn.net/qq_39108466/article/details/78478539

版权

前端开发同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

echarts3-0

1 篇文章 0 订阅

订阅专栏

由于项目中大多统计图用到的Echarts属性值都大同小异且设计中统计图的一般属性（如标题文字样式、柱状图形状等）需要保持一致，在此把共有属性放在一起，便于统一样式控制。个别不一样的样式在参数或者相应的初始化函数中单独设置处理：

 //Echarts统计图共有options设置集合
    var commonOpts = {
        title: {
            text: "",//正标题
            x: "center", //标题水平方向位置
            y: "top", //标题竖直方向位置
            textStyle: {
                fontSize: 18,
                fontWeight: 'normal',
                color: '#666'
            }
        },
        legend: {
            data: [{icon: 'circle'}],
            bottom: 'bottom'
        },
        tooltipBarLine: { //柱状线状图
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        tooltipBar: { //柱状图
            trigger: 'axis',//触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
            axisPointer: {
                type: 'line'// 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {//统计表的上下空间
            left: '5%',
            right: '6%',
            top: '60',
            bottom: '15%', //60//若统计图x轴的label显示不全，则应加大该数值
            containLabel: true
        },
        label: {
            normal: {
                show: true,//数据是否显示
                position: 'top'//数据显示位置
            }
        },
        textStyle: {
            color: "#666" //字体颜色
        },
        axisLine: { //轴线设置
            lineStyle: {
                type: 'solid',
                color: '#999',
                width: 1
            }
        },
        axisLabel: {//轴label设置
            interval: 0,
            // rotate:  30 , // 当标签过长时应设置为倾斜
            textStyle: {
                color: '#666'
            }
        },
        series: { //柱状图 bar设置
            barWidth: 30,//柱状条宽度
            itemStyle: {
                emphasis: 30,
                normal: {
                    show: true,//鼠标悬停时显示label数据
                    barBorderRadius: [10, 10, 10, 10]//柱形图圆角，初始化效果
                    // color: '#2196f3'
                }
            },
            label: {
                normal: {
                    show: true, //显示数据
                    position: 'top', //显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
                    textStyle: {
                        // color: '#BOBOBO' //显示数据的颜色
                    }
                }
            }
        }
    };

具体demo代码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        .section {
            width: 915px;
            border: 1px solid #ccc;
        }
        .chart {
            width: 810px;
            height: 400px;
        }

    </style>
</head>
<body style="height: 100%; margin: 0">
<div class="section">
    <div class="chart" id="stackChart"></div>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script>

    renderStackBar();

    function renderStackBar() {
        var axisLabel = ["政治 历史 生物", "政治 物理 生物", "政治 地理 生物", "政治 历史 物理","政治 历史 地理", "历史 物理 生物", "政治 历史 化学", "历史 地理 生物", "政治 地理 物理"];
        var seriesData = [];

        for (var i = 0; i < 5; i++) {
            var singleData = [];
            for(var j = 0; j < axisLabel.length; j++){
                singleData.push(Math.floor(Math.random() * 100));
            }
            seriesData.push(singleData);
        }

        initChartStackedBar('stackChart', axisLabel, seriesData);
    }

    /**
     * 初始化堆叠柱状图
     * @param domeId 统计图dom容器id
     * @param axisLabel 轴label
     * @param seriesData series data值 - 数组
     */
    function initChartStackedBar(domeId, axisLabel, seriesData) {
        var myChart = echarts.init(document.getElementById(domeId));
        var stackColorList = ['#FBB730', '#97ddff', '#60d8e8', '#755FEE', '#6197fb'];
        var seriesValue = [];
        var legendList = [];
        var len = seriesData.length;

        for (var g = 0; g < len; g++) {
            legendList.push("兴趣第" + Number(g + 1) + "位人数");
            var serieObj = {
                name: legendList[g],
                type: 'bar',
                stack: '总量',
                barWidth: 50,
                label: {
                    normal: {
                        show: true,//显示数据
                        position: 'insideLeft'
                    }
                },
                data: seriesData[g],
                itemStyle: {
                    normal: {
                        color: stackColorList[g]
                    }/*,
                    emphasis: commonOpts.series.itemStyle.emphasis*/
                }
            };
            seriesValue.push(serieObj);
        }

        var option = {
            title: commonOpts.title,
            tooltip: commonOpts.tooltipBar,
            legend: {
                data: legendList,
                y: 'bottom'
            },
            grid: commonOpts.grid,
            yAxis: {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data: axisLabel,
                axisLabel: commonOpts.axisLabel
            },
            series: seriesValue
        };
        if (option && typeof option === "object") {
            option.xAxis.axisLabel.rotate = 30;
            option.title.text = '6选3学科组合兴趣前5位的学生集中度';
            myChart.setOption(option, true);
        }
    }


</script>
</body>
</html>

效果图：
这里写图片描述

小虾Suki

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
笔记：Echarts - 堆叠柱状图

由于项目中大多统计图用到的Echarts属性值都大同小异且设计中统计图的一般属性（如标题文字样式、柱状图形状等）需要保持一致，在此把共有属性放在一起，便于统一样式控制。个别不一样的样式在参数或者相应的初始化函数中单独设置处理： //Echarts统计图共有options设置集合 var commonOpts = { title: { text: "",
复制链接

扫一扫