vue的echarts,饼图结合 width:100； display:none显示不完全

最新推荐文章于 2024-11-13 21:00:06 发布
原创最新推荐文章于 2024-11-13 21:00:06 发布 · 812 阅读
0 ·
CC 4.0 BY-SA版权
js 同时被 2 个专栏收录
23 篇文章
订阅专栏
vue.js
17 篇文章
订阅专栏
本文介绍了一个轨道交通成本分析系统的设计与实现。系统通过前端界面收集用户输入的年份和建设项目信息，利用 jqGrid 显示相关成本数据，并使用 ECharts 绘制成本构成饼状图进行直观展示。

<!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>

    <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: 375px;" 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>


$(function () {
    $("#jqGrid").jqGrid('clearGridData');  //清空表格
    $("#jqGrid").jqGrid({
       // url: '/gdjt/yw/revueneExpenditure/list',
       url:'/gdjt/operCost/getListPage?limit=10&page=1',
       datatype: "json",
        postData:{
          'year': '', // 年份
          'subway': '', // 每页大小
          'projectName': ''// 轨道交通一期
        },
        colModel: [
            { label: '序号', name: 'id',align:'center', width: 8 },
            { label: '操作', name: '',  width: 8, align: 'center',
                formatter: function (cellvalue, options, rowObject) {
                    console.log(cellvalue, options, rowObject,"three");
                    var item = JSON.stringify(rowObject);
                    console.log(item,"item");
                    // var dtail='<input type=\'button\' value=\'查看\' class=\'see-but\'  onclick=\'vm.queryDateils('+ item +')\'>';
                    var dtail='<input type=\'button\' value=\'查看\' class=\'see-but\'  onclick=\'vm.queryDateils('+ item +')\'>';
                    return dtail;
                }
            },
            // 年度
            { label: '年度', name: 'year',align:'center', width: 15 },
            { label: '项目', name: 'projectName',align:'center', width: 15},
            { label: '工资及社会福利金(元)', name: 'gzjshflj',align:'center', width: 14 },
            { label: '车辆维修费(元)', name: 'clwxf',align:'center', width: 14 },
            { label: '牵引电力(元)', name: 'qydl',align:'center', width: 14},
            { label: '生产消耗费(元)', name: 'scxhf', align:'center', width: 15 },
            { label: '企业管理费(元)', name: 'qyglf', width: 15 },
            { label: '基本折旧资(元)', name: 'jbzjf', align:'center', width: 15 },
            { label: '车公里成本(元)', name: 'cglcb', align:'center', width: 15 }
        ],
        viewrecords: true, // 是否要显示总记录数信息
        height: 401, // 表格高度
        rowNum: 10, // 设置表格可以显示的记录数
        rowList : [10,30,50], // 可以改变表格可以显示的记录数
        rownumbers: false, // 如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。
        rownumWidth: 60, // 如果rownumbers为true，则可以设置column的宽度
        autowidth:true, // 如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth
        //multiselect: true, // 定义是否可以多选
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        }
    })
})

var vm = new Vue({
    el:'#rrapp',
    data:{
        list:[],
        listFirst:[],
        pielist:[],
        showDateils:1,
        dateYear: '',// 时间日历(年份)
        constructionProject:"", // 请输入内容
        // yearValue:""
    },

    created(){
        this.getlist();
        // this.queryDateils();
    },

    methods:{

        // init() {

        // }

        updateList () {
          // console.log("constructionProject", vm.constructionProject);
          $("#jqGrid").jqGrid('clearGridData');  //清空表格
          var page = $("#jqGrid").jqGrid('getGridParam','page')
          $("#jqGrid").jqGrid('setGridParam',{
              postData:{
                'year': vm.dateYear, // 年份
                'subway': vm.subway, // 每页大小
                'projectName': vm.constructionProject // 轨道交通一期
              },
              page:page
          }, true).trigger("reloadGrid")
        },

        getlist:function(){
            $.get('/gdjt/operCost/getListPage?limit=10&page=1',function(result){
                vm.list=result.page.list;
                vm.listFirst=result.page.list[0]
                data = [
                {value: vm.listFirst.gzjshflj, name: '工资及社会福利会'},
                {value: vm.listFirst.clwxf, name: '车辆维修费'},
                {value: vm.listFirst.qydl, name: '牵引电力'},
                {value: vm.listFirst.scxhf,name: '生产消耗费'},
                {value: vm.listFirst.qyglf, name: '企业管理费'},
                {value: vm.listFirst.jbzjf,name: '基本折旧资'},
                {value: vm.listFirst.cglcb, name: '车公里成本'}
            ];
                vm.pielist=data;
                console.log(vm.listFirst.gzjshflj,vm.listFirst.clwxf,"vm.listFirst");
            })
        },

        // 点击查看
        queryDateils(item){
            // debugger
            console.log(item,"item");
        setTimeout(()=>{
            window.myChart = echarts.init(document.getElementById('echartBar'));
            SetEcharts(item);
        },500)  
            vm.showDateils=false ;
        },

        datePick(){
          // 年选择器
          laydate.render({
            elem: '#dateYear',
            type: 'year',
            trigger: 'click',
            done: function(value, date){
              console.log("value",value);
              vm.dateYear = value
            }
          })
        },

        // 点击查询
        queryData(){
            vm.updateList()
        },

        // 重置
        reset(){
            vm.constructionProject=""
            vm.dateYear = ''
            // vm.$refs.pick.$data.id = ''
            // vm.yearValue = ''
            vm.updateList()
        },

        // 点击返回
        bntClick(){
            vm.showDateils=true 
        },
    }

})


function SetEcharts(data)
{
    console.log(document.getElementById('echartBar').offsetWidth)
    // debugger
    var _data=[
        {value:data.cglcb,name:"工资及社会福利会"},
        {value:data.clwxf,name:"车辆维修费"},
        {value:data.qydl,name:"牵引电力"},
        {value:data.scxhf,name:"生产消耗费"},
        {value:data.qyglf,name:"企业管理费"},
        // {value:data.jbzjf,name:"基本折旧费"},
        {value:data.jbzjf,name:"基本折旧费"},
        {value:data.cglcb,name:"车公里成本"}
    ];
    var option = {
    title: {
        text: data.year+'轨道一期成本分析',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '<br/>{b} : {c} ({d}%)'
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ["工资及社会福利会", '车辆维修费', '牵引电力', '生产消耗费', '企业管理费','基本折旧费',
                '车公里成本'
        ]
    },
    //  '#6699FF'  '#c23531' '#66CC66' '#6633CC' '#0099FF'  '#FFCC66' '#3366CC'    #FF9933    
    color : ['#6699FF','#c23531','#66CC66','#6633CC','#0099FF','#FFCC66','#FF9933'],
    series: [
        {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: _data,
            // label: {
            //         normal: {
            //            length:105,
            //            position: 'inner',
            //            show : true,
            //            lineStyle:{
            //                    color: '#fff'
            //            }
            //         }
            //     },

            label: {
                normal: {
                    formatter: '{c}',
                }
            },

            labelLine:{  
                 normal:{  
                      length:10,  // 改变标示线的长度
                      // lineStyle: {
                      //    color: "", // 改变标示线的颜色
                      // }
                 },
            },

            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    // normal:{
                    //     labelLine:{
                    //         show:false
                    //     }
                    // }
                }
            }
        }
    ]
};
 // 使用刚指定的配置项和数据显示图表。
 window.myChart.setOption(option);

}