Cold_putoutstorage_web/src/components/echart/echart-bar-LR.vue

<!-- 柱图 -->
<template>
    <div style="height:100%;min-height: 300px;" :id="props.id" class="myChart"></div>
</template>

<script setup lang="ts">
import { inject, onMounted, reactive } from "vue";
const props = defineProps({
    id: {
        type: String,
        default: () => '',
    },
    lineData: {
        type: Object,
        default: () => { },
    },
})

let echartData: any = reactive({
    titles: '',//标题
    xAxisArr: [],//x轴
    seriesDiscount: [], //合同总金额
    seriesRecoveries: [] //合同已回款金额
})

let echart: any = null
let myChart: any = null

onMounted(() => {
    echart = inject('echart')
    myChart = echart.init(document.getElementById(props.id));
    setEchartFun();
})
//函数
const setEchartFun = async () => {
    myChart.setOption(initEcharts());
    window.onresize = function () {
        myChart.resize();
    };
}

const initEcharts = () => {
    // 绘制图表
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        title: {
            // text: 'Rainfall vs Evaporation',
            // subtext: echartData.titles
        },
        grid: {
            left: '0%',
            right: '1%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'value'
            }
        ],
        yAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }],
        series: [
            {
                name: 'Profit',
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: { //面积图颜色设置
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0, //offset 可取范围 0、0.1、0.2、到1
                                color: 'rgba(250, 51, 171, 0.8)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(206, 51, 181, 0.4)' // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    }
                },
                data: [200, 170, 240, 244, 200, 220, 210]
            },
            {
                name: 'Income',
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: { //面积图颜色设置
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0, //offset 可取范围 0、0.1、0.2、到1
                                color: 'rgba(250, 51, 171, 0.8)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(206, 51, 181, 0.4)' // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    }
                },
                data: [320, 302, 341, 374, 390, 450, 420]
            },
            {
                name: 'Expenses',
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'left'
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: { //面积图颜色设置
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0, //offset 可取范围 0、0.1、0.2、到1
                                color: 'rgba(250, 51, 171, 0.8)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(206, 51, 181, 0.4)' // 100% 处的颜色
                            }
                        ],
                        borderRadius: [30, 30, 0, 0], //圓角
                        globalCoord: false // 缺省为 false
                    }
                },
                data: [-120, -132, -101, -134, -190, -230, -210]
            }
        ]
    }
}
</script>