echarts 柱状图叠起来的

最新推荐文章于 2024-07-31 14:40:54 发布

Caroline_Yang

最新推荐文章于 2024-07-31 14:40:54 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/Caroline_Yang/article/details/81910717

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/echarts.common.min.js"></script>
</head>
<body>
<div id="zjqst" style="width: 1000px;height: 500px;"></div>
<script>
    var chart_c1 = echarts.init(document.getElementById('zjqst'));//指定的id要有高度和宽度
    var dataMoney = [0, 20, 40, 60, 80, 100, 120, 140, 160];//y轴
    var dataMouth = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];//x轴
    //显示数据，可修改
    var data1 = [22, 24, 38, 43, 59, 25, 49, 34, 44, 34, 22, 46];
    var data2 = [35, 46, 43, 59, 60, 45, 53, 42, 56, 45, 36, 59];
    // 总计
    var data3 = function() {
        var datas = [];
        for (var i = 0; i < data1.length; i++) {
            datas.push(data1[i] + data2[i]);
        }
        return datas;
    }();

    option = {
        title: {
            text: '标题栏',
            left: 'center',
            top: 'top',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {
                type : 'shadow'
            },
            formatter:function (params){

                var relVal = params[0].name+"<br/>";
                relVal += params[0].seriesName+ ' : ' + params[0].value+"例子"+"<br/>";
                relVal +=params[1].seriesName+ ' : ' +params[1].value+"<br/>";
                // relVal += params[2].seriesName+ ' : ' + params[2].value+"%";
                return relVal;
            }
        },
        legend: {
            // orient: 'vertical',
            // x: 'center',
            // y: 'top',
            data:['料费','工费']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',

                data : dataMouth,
            }
        ],
        yAxis : [
            {
                type : 'value',
                data : dataMoney //可省略，只要type : 'value',会自适应数据设置Y轴
            }
        ],
        series : [
            {
                name:'料费',
                type:'bar',
                stack:'sum',  //柱状图叠在一起的关键设置
                barWidth : 30,
                itemStyle:{
                    normal:{
                        label: {
                            show: true,//是否展示
                        },
                        color:'#F89733'
                    }
                },
                data:data1
            },
            {
                name:'工费',
                type:'bar',
                stack:'sum',  //柱状图叠在一起的关键设置
                barWidth : 20,
                itemStyle:{
                    normal:{
                        label: {
                            show: true,//是否展示
                        },
                        color:'#DF7010'
                    }
                },
                data:data2
            },


            ]
        };
    chart_c1.setOption(option);


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

Caroline_Yang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫