web-retail-h5/components/distribution/mounthPvCompare.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-07-24 17:44:22
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-15 14:38:28
-->
<template>
    <div class="width-auto">
        <view class="titleF">
            <view class="title">
              {{$t('w_0145')}}
            </view>
            <picker :range="selMounthList" :value="index" range-key="label" @change="bindPickerChange">
                <view class="mClass">
                    <view>{{whatMounth}}月</view>
                    <u-icon name="arrow-down" color="#999"></u-icon>
                </view>
    
            </picker>
    
        </view>
        <div class="flex-s">
            <div id="mounthData" style="width: 700rpx;height: 600rpx;" :style="myChartStyle"></div>
        </div>
    </div>
</template>

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

import * as api from '@/config/activity.js'
export default {
    data() {
        return {
            index: 0,
            myChartStyle: {
                float: "center",
                width: "690rpx",
                height: "750rpx",
                paddingTop: "0",
            },
            selMounthList: [{
                value: 1,
                label: '1月',
            }, ],

            whatMounth: '',
            mounthList: [{
                    value: 1,
                    label: '1月',
                },
                {
                    value: 2,
                    label: '2月',
                },
                {
                    value: 3,
                    label: '3月',
                },
                {
                    value: 4,
                    label: '4月',
                },
                {
                    value: 5,
                    label: '5月',
                },
                {
                    value: 6,
                    label: '6月',
                },
                {
                    value: 7,
                    label: '7月',
                },
                {
                    value: 8,
                    label: '8月',
                },
                {
                    value: 9,
                    label: '9月',
                },
                {
                    value: 10,
                    label: '10月',
                },
                {
                    value: 11,
                    label: '11月',
                },
                {
                    value: 12,
                    label: '12月',
                },
            ],
            // margin: "20px",
            //
        }
    },
    mounted() {
        this.getMounth()
        this.upDateCover()
        // this.drawChart()
    },
    methods: {
        bindPickerChange(e) {
            this.whatMounth = e.detail.value + 1
            setTimeout(() => {
                this.upDateCover()
            }, 50)
        },
        // 获取当前月
        getMounth() {
            this.whatMounth = new Date().getMonth() + 1
            let selMounth = []
            this.mounthList.forEach((item) => {
                if (item.value <= this.whatMounth) {
                    selMounth.push(item)
                }
            })
            this.selMounthList = selMounth
        },
        upDateCover() {
            api
                .achieveContrast({
                    monthType: this.whatMounth || this.time
                })
                .then((res) => {
                    let arr1 = res.data.map((item) => {
                        return item.date
                    })
                    let arr2 = res.data.map((item) => {
                        return item.aNewPv
                    })
                    let arr3 = res.data.map((item) => {
                        return item.bNewPv
                    })
                    this.drawChart(arr1, arr2, arr3)
                })
        },
        drawChart(arr1, arr2, arr3) {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            var myChart = echarts.init(document.getElementById("mounthData"));
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '',
                    subtext: this.$t('w_0339'),
                },
                tooltip: {},
                legend: {
                    top: 'bottom',
                    bottom: '5%',
                    data: [this.$t('S_C_18'), this.$t('S_C_19')],
                },
                xAxis: {
                    data: arr1,
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                        },
                    },
                },
                series: [{
                        name: this.$t('S_C_18'),
                        type: 'bar',
                        data: arr2,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#FE4C4B',
                            },
                        },
                    },
                    {
                        name: this.$t('S_C_19'),
                        type: 'bar',
                        data: arr3,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#FFAE36',
                            },
                        },
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
    },
}
</script>

<style scoped lang="scss">
.width-auto {
    width: 100%;
    position: relative;
    height: 950rpx;
    background-color: #fff;
    width: 690rpx;
    border-radius: 20rpx;
    margin: 20rpx auto;
}

.title {
    
    height: 80rpx;
    line-height: 80rpx;
    
    margin-top: 10rpx;
}

::v-deep .el-select .el-input .el-select__caret {
    color: #333;
}

.lines {
    width: 2px;
    height: 470px;
    opacity: 1;
    background: #979797;
    position: absolute;
    bottom: 50px;
    left: 50%;
    margin-left: -110px;
}

.right-lines {
    position: absolute;
    right: 80px;
    top: 140px;
    color: #999;
    font-size: 12px;
}

.item-s {
    padding-bottom: 10px;
    display: flex;
    line-height: 24px;
}

.bg-color {
    width: 40px;
    height: 22px;
    border-radius: 2px;
    margin-left: 5px;
}

.flex-s {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // width: 700px;
    padding: 0 20rpx;
}

.styles {
    position: absolute;
    right: -30px;
    z-index: 111;
    top: 60px;
    /*background: rgba(0,0,0,0.05);*/
    /*border-radius: 4px 4px 4px 4px;*/
}

::v-deep .el-select .el-input__inner {
    border: none;
    background: rgba(0, 0, 0, 0.05);
}
.titleF{
  display: flex;
  border-bottom: 10rpx solid #f3f3f3;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
}
.mClass {
    display: flex;
}
</style>