iot-front-ui/src/components/dashboard/portrait/money/investCategoryNum.vue

<template>
    <div class="myChart" ref="myChart" :style="{height: height+'px'}">

    </div>
</template>

<script>
import apiDashboard from "@/api/dashboard/apiDashboard";

export default {
    data() {
        return {
            option: {
                color: ['#3AA7E6','#9790F8','#4ACFB8','#F4955F','#F8797E'],
                legend: {
                    data: [
                        '固定资产一级分类',
                        '平均使用时间',
                    ],
                },
                grid: {
                    left: '2%', //默认10%
                    right: '2%', //默认10%
                    bottom: '0%', //默认60
                    top: '15%',
                    containLabel: true
                    //grid区域是否包含坐标轴的刻度标签
                },
                xAxis: {
                    type: 'category',
                    data: ['办公室','局房类','个人办公类']
                },
                yAxis: [
                    {
                        name: '数量(件)',
                        type: 'value',
                    },
                    {
                        name: '时间(年)',
                        type: 'value',
                    },
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        color: '#fff',
                        align: 'left',
                        fontSize: 14
                    },
                    axisLine: {//x坐标轴轴线
                        show: true,
                        lineStyle: {//x坐标轴轴线样式
                            color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
                        }
                    },
                    backgroundColor: 'rgba(0,0,0,0.8)',
                },
                series: [
                    {
                        name: '固定资产一级分类',
                        data: [5,8,12],
                        type: 'bar',
                        yAxisIndex: 0,
                        stack: 'A',
                        barWidth: '30px',
                    },
                    {
                        name: '平均使用时间',
                        data: [2,3,4],
                        yAxisIndex: 1,
                        type: 'line',
                        smooth:true,
                        showSymbol:false,
                    },
                ]
            }
        }
    },
    props: {
        height: Number,
        queryData: Object
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            let chart = this.$echarts.init(this.$refs.myChart);
            this.chart = chart
            chart.setOption(this.option);
            this.getData();
        },
        getData() {
            //return apiDashboard.getMoneyDistributionData(this.queryData).then(res=>{
            //    let data = this.$util.dataUtil.covertDataToEcharts(res, ['investment1','investment2','investment3','investment4','rateReturn'])
            //    this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
            //})
        }
    }
}
</script>

<style lang="less" scoped>
</style>