echarts柱状图legend分2行排列

最新推荐文章于 2024-06-25 15:12:52 发布

hardwork come on

最新推荐文章于 2024-06-25 15:12:52 发布

阅读量2.7k

点赞数 1

分类专栏： js vue.js

本文链接：https://blog.csdn.net/weixin_43353869/article/details/111386301

版权

js 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue.js

17 篇文章 1 订阅

订阅专栏

legend: [
        {
            orient: 'horizontal',
            // top: 'middle',
            // padding:[0,50,0,0],
            // x:'right',      //可设定图例在左、右、居中
            // y:'bottom',
            // bottom: 20,
            itemWidth: 10,
            itemHeight: 10,
            left: 'center',
            bottom: '5%',
            data: ["工资及社会福利会", '车辆维修费', '牵引电力', '生产消耗费']
        },
        {
            orient: 'horizontal',//水平排列。（vertical为垂直排列}
            itemWidth: 10,
            itemHeight:10,
            left:'center',
            bottom: 'bottom',
            // bottom:'bottom',
            data: ['企业管理费','基本折旧费','车公里成本']
        },
    ],



// 图例两行排列
 {
            orient: 'horizontal',
            x : '30%',
            // y : '10%',
            bottom:"5%",
            align: 'left',
            data: ['工资及社会福利会'],
            textStyle:{
                fontSize: "16px",
                color:'#000'
            }
        },{
            orient: 'horizontal',
            x : '43%',
            bottom:"5%",
            align: 'left',
            data: ['车辆维修费'],
            textStyle:{
                fontSize: "16px",
                color:'#000'
            }
        },{
            orient: 'horizontal',
            x : '53%',
            bottom:"5%",
            align: 'left',
            data: ['牵引电力'],
            textStyle:{
                fontSize: "16px",
                color:'#000'
            }
        },{
            orient: 'horizontal',
            x : '63%',
            bottom:"5%",
            align: 'left',
            data: ['生产消耗费'],
            textStyle:{
                fontSize: "16px",
                color:'#000'
            }
        },{
            orient: 'horizontal',
            x : '30%',
            y:'bottom',
            align: 'left',
            data: ['企业管理费'],
            textStyle:{
                fontSize: "16px",
                color:'#000'
            }
        },{
            orient: 'horizontal',
            x : '43%',
            y:'bottom',
            align: 'left',
            data: ['基本折旧费'],
            textStyle:{
                fontSize: "16px",
                color:'#000'
            }
        },{
            orient: 'horizontal',
            x : '53%',
            y:'bottom',
            align: 'left',
            data: ['车公里成本'],
            textStyle:{
                fontSize: "16px",
                color:'#000'
            }
        }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <title>轨道交通-线网查询</title>
    <#include "/header.html">
    <style>
       .see-but{
            border-collapse: collapse;
            border-spacing: 0;
            word-break: break-all;
            box-sizing: border-box;
            height: 22px;
            font-size: 12px;
            color: #fff;
            background: #f66;
            border: none;
            padding: 0px 5px;
            border-radius: 4px;
            cursor: pointer;
            outline: none;
            margin: 0 3px;
       }
       #btn{
            /*width: 100px;
            height: 50px;*/
            height: 28px;
            line-height: 28px;
            font-size: 13px;
            color: #404040;
            background: #f5f5f5 !important;
            border: 1px solid #ccc;
            padding: 0 15px !important;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
            margin: 70px 0px;
            /*float: right;*/
            position:relative;
            left:50%;
            transform:translateX(-50%);

       }
       #btn:hover {
            background: #e5e5e5 !important;
            border: 1px solid #ccc;
       }
       .echar{
            left:50%;
            transform:translateX(-50%);
       }
    </style>
</head>
<body>

// 点击按钮把ehcarts

    <div id="rrapp">
        <div v-show="showDateils">

            <div class="mask"></div>
              <div class="grid-btn">
                <div class="form-group col-sm-2">
                  <div class="input-bor" style="width: 210px;">
                      年份：<input class="bg clearfix" style="width: 139px;height: 23px;border: none;text-align: left;"  id="dateYear" class="select01" type="text" readonly placeholder="请选择" @click.stop="datePick" v-model="dateYear">
                  </div>
                </div>
                <!-- <line-pick @selected="selected" ref="pick"></line-pick> -->
                <div class="form-group col-sm-2">
                <div class="input-bor">建设工程
                    <input style="width: 145px;height: 23px;border: none; float: right" text="text" v-model.trim="constructionProject" placeholder="请输入">
                </div>
            </div>
                <div class="form-group col-sm-2" style="float: right">
                  <a class="btn btn-default" @click.stop="queryData"  style="display: inline;">查询</a>
                  <a class="btn btn-warning" @click.stop="reset" style="display: inline;">重置</a>
                </div>
            </div>    
            <table id="jqGrid" class="table-bordered ly-jqgrid content"></table>
            <div id="jqGridPager"></div>
        </div>
        <!-- 显示图表 -->
             <div style="width: 100%; height: 400px; margin-top:50px; position: relative;" v-show="!showDateils">
                  <div id="echartBar" style="width: 100%; height: 400px;" class="echar"></div>
                  <input type="button" value="返回" id="btn" @click="bntClick"/>
             </div>
       
    </div>
<link rel="stylesheet" href="${request.contextPath}/statics/plugins/layui/css/layui.css">
<script type="text/javascript" src="${request.contextPath}/statics/plugins/layui/lay/laydate/laydate.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/plugins/layui/layui.js"></script>
<script src="${request.contextPath}/statics/libs/echarts.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/js/modules/gdjt/yycbfx/yycbfx.js"></script>
<script type="text/javascript">
    
</script>
</body>
</html>