vue3的EChart显示多条数据横向滚动显示

<template>
    <el-skeleton :loading="loading" animated>
        <template v-if="getData" #default>
            <el-card style="border: 0px solid #fff" class="chart-item-container" :body-style="{
                padding: 0
            }" shadow="never">
                <div ref="fullYearSalesChart" class="chart-item"></div>
            </el-card>
        </template>
    </el-skeleton>
</template>
<script lang="ts">
import { useEcharts } from '@/hooks'
import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue'
import { dispose, graphic } from 'echarts'

export default defineComponent({
    name: 'FullYearSalesChart',
    props: {
        getData: {
            type: Object,
            required: true,
            default: () => ({
                day: ['06/16', '06/17', '06/18', '06/19', '06/20', '06/21', '06/22', '06/23', '06/24', '06/25', '06/26', '06/27'],
                title: ['销量', '销售额', '成本', '毛利'],
                sale: [250, 329, 391, 296, 130, 168, 135, 124, 132, 135, 283, 168],
                saleMoney: [220, 389, 265, 221, 154, 383, 330, 195, 306, 390, 108, 320],
                cost: [339, 311, 151, 255, 388, 229, 373, 226, 265, 319, 216, 203],
                profit: [309, 198, 277, 172, 252, 264, 106, 368, 115, 361, 124, 232]
            })
        }
    },
    emits: [''],
    setup(props, { emit }) {
        const loading = ref(true)
        const fullYearSalesChart = ref<HTMLDivElement | null>(null)
        let interval: any = null
        const init = () => {
            const option = {
                dataZoom: [{
                    xAxisIndex: 0, //这里是从X轴的0刻度开始
                    show: true, //是否显示滑动条，不影响使用
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    startValue: 0, // 从头开始。
                    endValue: 7, // 一次性展示6个
                    height: 8, //组件高度
                    bottom: 25,
                    borderColor: '#E0E1E2',
                    fillerColor: '#027aff',
                    zoomLock: true,
                    showDataShadow: false, //是否显示数据阴影 默认auto
                    backgroundColor: '#fff',
                    showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                    realtime: true, //是否实时更新
                    // filterMode: 'filter',
                    handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
                    handleStyle: {
                        color: '#E0E1E2',
                        borderColor: '#E0E1E2',
                    },
                    moveHandleSize: 20,
                    moveOnMouseMove: true,
                    maxValueSpan: 7,
                    minValueSpan: 7,
                    moveHandleSize: 0,
                    brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
                },
                ],
                color: ['rgba(64, 58, 255)'],
                grid: {
                    top: '15%',
                    left: '5%',
                    right: '5%',
                    bottom: '15%',
                    containLabel: true
                },
                legend: {
                    y: 'bottom',
                    x: 'center',
                    orient: 'horizontal',
                    data: props.getData.title
                },
                tooltip: {
                    trigger: 'axis'
                },
                axisPointer: {
                    type: 'shadow'
                },
                xAxis: {
                    type: 'category',
                    data: props.getData.day,
                    axisLabel: {
                        interval: 0, // 横坐标标签全部显示
                        formatter: function (value) {
                            return value.split('/').join('\n'); // 将日期格式改为换行显示
                        }
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        barWidth: 20, //柱子宽度
                        barGap: 0, //柱子跟主子之间的宽度
                        barCategoryGap: '5%', //月份之间的宽度
                        // emphasis: {   //移动柱条透明
                        //   focus: 'series'
                        // },
                        type: 'bar',
                        name: '销量',
                        data: props.getData.sale,
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: {
                                color: '#188df0' //数值样式
                            },
                            formatter(val: any) {
                                return val.data + ' '
                            }
                        },
                        itemStyle: {
                            color: new graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#188df0'
                                },
                                {
                                    offset: 0.5,
                                    color: '#188df0'
                                },
                                {
                                    offset: 1,
                                    color: '#188df0'
                                }
                            ])
                        }
                    },
                    {
                        barWidth: 20,
                        barGap: 0,
                        barCategoryGap: '5%',
                        type: 'bar',
                        name: '销售额',
                        data: props.getData.saleMoney,
                        label: {
                            show: true,
                            position: 'top', //在上方显示
                            textStyle: {
                                color: '#68BBC4' //数值样式
                            },
                            formatter(val: any) {
                                return val.data + ' '
                            }
                        },
                        itemStyle: {
                            color: new graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#68BBC4'
                                },
                                {
                                    offset: 0.5,
                                    color: '#68BBC4'
                                },
                                {
                                    offset: 1,
                                    color: '#68BBC4'
                                }
                            ])
                        }
                    },
                    {
                        barWidth: 20,
                        barGap: 0,
                        barCategoryGap: '5%',

                        type: 'bar',
                        name: '成本',
                        data: props.getData.cost,
                        label: {
                            show: true,
                            position: 'top', //在上方显示
                            textStyle: {
                                color: '#58A55C' //数值样式
                            },
                            formatter(val: any) {
                                return val.data + ' '
                            }
                        },
                        itemStyle: {
                            color: new graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#58A55C'
                                },
                                {
                                    offset: 0.5,
                                    color: '#58A55C'
                                },
                                {
                                    offset: 1,
                                    color: '#58A55C'
                                }
                            ])
                        }
                    },
                    {
                        barWidth: 20, //柱子宽度
                        barGap: 0,
                        barCategoryGap: '10%',

                        type: 'bar',
                        name: '毛利',
                        data: props.getData.profit,
                        label: {
                            show: true,
                            position: 'top', //在上方显示
                            textStyle: {
                                color: '#F2BD42' //数值样式
                            },
                            formatter(val: any) {
                                return val.data + ' '
                            }
                        },
                        itemStyle: {
                            color: new graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#F2BD42'
                                },
                                {
                                    offset: 0.5,
                                    color: '#F2BD42'
                                },
                                {
                                    offset: 1,
                                    color: '#F2BD42'
                                }
                            ])
                        }
                    }
                ]
            }
            setTimeout(() => {
                loading.value = false
                nextTick(() => useEcharts(fullYearSalesChart.value as HTMLDivElement).setOption(option))
            }, 1000)
        }
        const updateChart = () => {
            useEcharts(fullYearSalesChart.value as HTMLDivElement).resize()
        }
        // 使用watch来监听props.data的变化
        watch(
            props.getData,
            newData => {
                if (newData) {
                    console.log(newData, 'newDatanewDatanewData')
                    // 数据发生变化时执行的操作
                    // 例如调用init()方法来渲染图表
                    loading.value = true
                    init()
                }
            },
            {
                deep: true
            }
        )
        onMounted(() => {
            init()
        })
        return {
            loading,
            fullYearSalesChart,
            updateChart
        }
    }
})
</script>

<style lang="scss" scoped>
.chart-item-container {
    width: 100%;
    height: 300px;
    cursor: pointer;

    .chart-item {
        height: 300px;
        cursor: pointer;
    }
}
</style>