Echarts-单柱状图组件

<template>
    <div class="interactionTemplate">
        <div class="echart" id="mychart"></div>
        <div class="content">
            <div class="listBox" :style="{height:tabHeight}" :class="{'ani':dataList.length>3}">
                <div>
                    <div class="listItem" v-for="(item,index) in dataList" :key="index">
                        <div>
                            <span>{{item.date}}</span>
                            <span>{{item.date1}}</span>
                        </div>
                        <div>{{item.title}}</div>
                        <div>{{item.time}}</div>
                    </div>
                </div>
                <div v-if="dataList.length>3">
                    <div class="listItem" v-for="(item,index) in dataList" :key="index">
                        <div>
                            <span>{{item.date}}</span>
                            <span>{{item.date1}}</span>
                        </div>
                        <div>{{item.title}}</div>
                        <div>{{item.time}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
   
<script>
import * as echarts from "echarts";

export default {
    data() {
        return {
            dataList: [
                { date: '2022/10/11', date1: '09:55', title: '发布了最新资讯', time: '30分钟之前' },
                { date: '2022/10/11', date1: '09:55', title: '发布了最新资讯', time: '30分钟之前' },
                { date: '2022/10/11', date1: '09:55', title: '发布了最新资讯', time: '30分钟之前' },
                { date: '2022/10/11', date1: '09:55', title: '发布了最新资讯', time: '30分钟之前' },
                { date: '2022/10/11', date1: '09:55', title: '发布了最新资讯', time: '30分钟之前' },
                { date: '2022/10/11', date1: '09:55', title: '发布了最新资讯', time: '30分钟之前' },
                { date: '2022/10/11', date1: '09:55', title: '发布了最新资讯', time: '30分钟之前' },
                { date: '2022/10/11', date1: '09:55', title: '发布了最新资讯', time: '30分钟之前' },
                { date: '2022/10/11', date1: '09:55', title: '发布了最新资讯', time: '30分钟之前' }
            ]
        };
    },
    computed: {
        tabHeight: function () {
            return this.dataList.length * 0.42 + 'rem'
        }
    },
    mounted() {
        this.initEcharts();
    },
    methods: {
        initEcharts() {
            // 基本柱状图
            const option = {
                xAxis: {
                    type: 'category',
                    data: ['资讯公告', '村民认证', '村友圈', '健康上报', '返乡登记', '其它'],
                    axisLine: {
                        lineStyle: {
                            color: "rgba(225, 225, 225, 0.15)"
                        }
                    },
                    axisLabel:{
                        color:"#fff"
                    }
                    
                },
                grid: {
                    top: "22%",
                    left: "10%",
                    right: "0",
                    bottom: "20%"
                },
                yAxis: {
                    type: 'value',
                    splitLine: { //网格线
                        show: true,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: "rgba(225, 225, 225, 0.15)"
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(225, 225, 225, 0.6)"
                        }
                    }
                },
                series: [
                    {
                        data: [463, 78, 359, 572, 184, 89],
                        type: 'bar',
                        // 设置柱子颜色
                        barWidth: 24,
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#49c5ee' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#6e88d7' // 100% 处的颜色
                                }
                            ]
                        },
                        // 在柱子上面设置相对应的数字,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    // 文字的颜色，字体大小，字体加深
                                    textStyle: {
                                        color: '#19f7ff',
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    }
                                },
                                barBorderRadius: [6, 6, 0, 0]
                            }
                        },
                    }
                ]
            };
            const myChart = echarts.init(document.getElementById("mychart"));
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            myChart.setOption(option)
        }
    }
};
</script>
<style scoped>
.interactionTemplate {
    width: 100%;
    height: 100%;
}

.interactionTemplate .echart {
    width: 100%;
    height: 50%;
}

.interactionTemplate .content {
    width: 100%;
    height: 100%;
    height: 1.2rem;
    margin-top: .1rem;
    overflow: hidden;
}

.interactionTemplate .listBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.interactionTemplate .listItem {
    width: 4.7rem;
    height: .3rem;
    margin-top: .08rem;
    box-sizing: border-box;
    overflow: hidden;
    background-image: url("../assets/img/c1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem 0 .3rem;
    align-items: center;
}
.interactionTemplate .listItem>div:first-child{
    text-align: left;
}
.interactionTemplate .listItem>div:first-child>span:first-child{
    margin-right: .1rem;
}
.interactionTemplate .listItem>div:nth-child(2){
    text-align: center;
    margin-left: .3rem;
}
.interactionTemplate .listItem>div:last-child{
    text-align: right;
}
.interactionTemplate .listItem>div {
    width: 30%;
    height: .3rem;
    line-height: .3rem;
    font-size: .14rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #f4f4f4;
}

.interactionTemplate .ani {
    animation: tab 5s linear infinite;
    -webkit-animation: tab 5s linear infinite;
    ;
    /*Webkit内核的浏览器（如 Safari、Chrome）*/
    -moz-animation: tab 5s linear infinite;
    ;
    /*gecko内核的浏览器（如 Firefox）*/
    -o-animation: tab 5s linear infinite;
    ;
    /*Opera 浏览器*/
    -ms-animation: tab 5s linear infinite;
    ;
    /*IE8+*/
}

@keyframes tab {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-100%);
    }
}
</style>