echarts画柱状图

npm install echarts@5.3.3 -S

公司需求：柱状图可以堆叠，最上面显示合计
看了半天官方文档，也只能看文档

<template>
    <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '350px'
        },
        autoResize: {
            type: Boolean,
            default: true
        },
        chartData: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            chart: null,
            lineName1: '收入',
            lineName2: '支出',
            lineName3: '收入运费',
            lineName4: '支出运费',
        }
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                this.setOptions(val)
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            // this.chart = echarts.init(this.$el, 'macarons')
            this.chart = echarts.init(this.$el)
            this.setOptions(this.chartData)
        },
        setOptions({ incomeTotalList, expenditureTotalList, incomeList, expenditureList, incomeFreightList, expenditFreightureList, dateList } = {}) {
            var options = {
                xAxis: {
                    data: dateList, //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    boundaryGap: true,//跳转图为false
                    axisTick: {
                        show: false
                    }
                },
                grid: {
                    left: 0,
                    right: 10,
                    bottom: 20,
                    top: 30,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    padding: [5, 10],
                    formatter: (params, ticket, callback) => {
                        let str = '';
                        params.forEach((item, idx) => {
                            if (idx < 4) {
                                str += `${item.marker}${item.seriesName}: ${item.data}` + '</br>'
                            } else if (idx == 4) {
                                str += `${item.marker}${item.seriesName}: ` + incomeTotalList[item.dataIndex] + '</br>'
                            } else {
                                str += `${item.marker}${item.seriesName}: ` + expenditureTotalList[item.dataIndex] + '</br>'
                            }
                        })
                        return str
                    },
                },
                yAxis: {
                    axisTick: {
                        show: false
                    }
                },
                legend: {
                    data: [this.lineName1, this.lineName2, this.lineName3, this.lineName4]
                },
                series: [{
                    name: this.lineName1,
                    stack: 'income',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: incomeList,
                    animationDuration: 800,
                },
                {
                    name: this.lineName2,
                    stack: 'expend',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: expenditureList,
                    animationDuration: 800,
                },
                {
                    name: this.lineName3,
                    stack: 'income',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: incomeFreightList,
                }, {
                    name: this.lineName4,
                    stack: 'expend',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: expenditFreightureList,
                    // }, {
                    //     name: '合计收入',
                    //     type: 'line',
                    //     symbolSize: 0,
                    //     lineStyle: {
                    //         width: 0, // 线宽是0不显示线
                    //         color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
                    //     },
                    //     emphasis: {
                    //         focus: 'series'
                    //     },
                    //     data: incomeTotalList,
                    // }, {
                    //     name: '合计支出',
                    //     type: 'line',
                    //     symbolSize: 0,
                    //     lineStyle: {
                    //         width: 0, // 线宽是0不显示线
                    //         color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
                    //     },
                    //     emphasis: {
                    //         focus: 'series'
                    //     },
                    //     data: expenditureTotalList,
                }, {
                    name: '合计收入',
                    stack: 'income',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        position: 'top',
                        show: true,
                        formatter: params => {
                            return incomeTotalList[params.dataIndex]
                        },
                    },
                    data: [0, 0, 0, 0, 0, 0, 0],
                }, {
                    name: '合计支出',
                    stack: 'expend',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        position: 'top',
                        show: true,
                        formatter: params => {
                            return expenditureTotalList[params.dataIndex]
                        },
                    },
                    data: [0, 0, 0, 0, 0, 0, 0],
                },
                ]
            }
            this.chart.setOption(options)
        }
    }
}
</script>