echarts - 多柱子柱状图

最新推荐文章于 2024-06-25 15:34:07 发布

遇见csm

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量3.6k

点赞数 2

分类专栏： echarts 文章标签： echarts 多柱子柱状图

本文链接：https://blog.csdn.net/csm17805987903/article/details/85044983

版权

echarts 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>echarts-多柱子柱状图</title>
    <style>
        body, html {
            width: 100%;
            height: 100%;
        }
        .section {
            width: 915px;
            border: 1px solid #ccc;
        }
        #barsDemo {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>

<div class="section">
    <div id="barsDemo"></div>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    $(function () {
        initData();
    });

    //生成数据
    function initData() {
        var legendData = ['甲', '乙','丙'];
        var bgColorList = ['#FBB730', '#31BDF2','#6197fb'];
        var axisLabel = ['化学', '数学', '地理', '物理', '英语', '音乐', '语文', '历史', '美术', '生物', '信息技术', '政治', '体育'];
        var seriesValue = [];

        for (var i = 0; i < legendData.length; i++) {
            var arrData = [];
            var seriesDataVal = null;
            for (var j = 0; j < axisLabel.length; j++) {
                arrData.push(Math.floor(Math.random() * 100));
            }
            seriesDataVal = {
                barWidth: 10,//柱状条宽度
                name:legendData[i],
                type:'bar',
                itemStyle: {
                    normal: {
                        show: true,//鼠标悬停时显示label数据
                        barBorderRadius: [10, 10, 10, 10],//柱形图圆角，初始化效果
                         color: bgColorList[i]
                    }
                },
                label: {
                    normal: {
                        show: true, //显示数据
                        position: 'top'//显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
                    }
                } ,
                data:arrData
            };
            seriesValue.push(seriesDataVal);
        }

        buildChart(legendData, axisLabel, seriesValue);

    }

    //生成Echarts图形
    function buildChart(legendData, axisLabel, seriesValue) {
        var chart = document.getElementById('barsDemo');
        var echart = echarts.init(chart);
        var option = {
            title: {
                text: "学科兴趣倾向分析",//正标题
                x: "center", //标题水平方向位置
                y: "0", //标题竖直方向位置
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'normal',
                    color: '#666'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'//阴影，若需要为直线，则值为'line'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: legendData,
                y: 'bottom'//图例说明文字设置

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                top:'10%',
                containLabel: true
            },
            xAxis: [{
                min: 0,
                type: 'category', //纵向柱状图，若需要为横向，则此处值为'value'， 下面 yAxis 的type值为'category'
                data: axisLabel
            }],
            yAxis: [{
                min: 0,
                type: 'value',
                splitArea: {show: false}
            }],
            label: {
                normal: { //显示bar数据
                    show: true,
                    position: 'top'
                }
            },
            series: seriesValue
        };

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

遇见csm

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
echarts - 多柱子柱状图

效果图：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;echarts-多柱子柱状图&lt;/title&gt; &lt;style&gt; body, html { width:
复制链接

扫一扫

专栏目录