manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/cost.vue

<template>
    <div id="container"></div> 
</template>

<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                user: JSON.parse(sessionStorage.getItem("user")),

                myChart: null
            };
        },
        methods: {
            getEchart(){
                var _this = this;
                this.http.post(this.port.project.listCost, {},
                res => {
                    if (res.code == "ok") {
                        var xList = [], yList = [], list = res.data.costList, totalMoneyCost = res.data.totalMoneyCost;
                        for(var i in list) {
                            xList.push(list[i].project);
                            yList.push({
                                value: list[i].cost,
                                "id": list[i].id,
                            });
                        }

                        var myChart = echarts.init(document.getElementById("container"));
                        _this.myChart = myChart;
                        var option = {
                            title: {
                                text: '项目成本统计 总计' + totalMoneyCost + '元',
                                left:'left',
                            },
                            // 工具箱
                            toolbox: {
                                show: true,
                                feature:{
                                    saveAsImage:{
                                        show:true
                                    },
                                    restore:{
                                        show:true
                                    },
                                    dataView:{
                                        show:true
                                    },
                                    dataZoom:{
                                        show:true
                                    },
                                    magicType:{
                                        type:['line','bar']
                                    }
                                }
                            },
                            tooltip:{
                                trigger:'axis'
                            },
                            xAxis: {
                                data: xList,
                                axisLabel: {
                                    interval:0,rotate:40
                                }
                            },
                            yAxis: [{
                                type : 'value',
                                axisLabel: {
                                    formatter:'{value} (h)'
                                }
                            }],
                            series: [{
                                name: '工作时长（h）',
                                type: 'bar',
                                barMaxWidth: 30,
                                data: yList,
                            }]
                        };
                        myChart.setOption(option);
                        myChart.on('click', function(params) {
                            _this.$router.push("/cost/" + params.data.id + "/" + params.name);
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            }
        },
        created() {
        },
        mounted() {
            this.$el.style.height = (window.innerHeight - 100) + "px";
            const that = this;
            window.onresize = function temp() {
                that.$el.style.height = (window.innerHeight - 100) + "px";
            };
            this.getEchart();
            var _this = this;
            window.addEventListener("resize", function() {
                _this.myChart.resize();
            });
        }
    };
</script>

<style lang="scss" scoped>
    #container {
        width: 100%; 
        margin-top: 10px;
    }  
</style>

<style lang="scss">
</style>