web-base-h5/components/distribution/activeMembers.vue

<template>
    <div class="width-auto">
        <view class="titleF">
            <view class="title">
              {{'活跃会员对比'}}
            </view>
            <picker :range="dateTypeList" :value="index" range-key="label" @change="bindPickerChange">
                <view class="mClass">
                    <view>{{dataName}}</view>
                    <u-icon name="arrow-down" color="#999"></u-icon>
                </view>
            </picker>
        </view>
        <div class="flex-s">
            <div id="mounthData2" 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 {
          dataName:'',
            index: 0,
            myChartStyle: {
                float: "center",
                width: "690rpx",
                height: "750rpx",
                paddingTop: "0",
            },
            dateTypeList: [],
            dateType: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.getDayType()
        this.upDateCover()
        // this.drawChart()
    },
    methods: {
        bindPickerChange(e) {
            this.dateType = e.detail.value +1
            this.dateTypeList.forEach(item=>{
              if(this.dateType == item.value){
                this.dataName = item.label
              }
            })
            setTimeout(() => {
                this.upDateCover()
            }, 50)
        },
        getDayType() {
      api.getDayType().then((res) => {
        this.dateTypeList = res.data
        this.dataName = res.data[0].label
      })
    },
        upDateCover() {
          api
        .getActiveMember({
          dateType: this.dateType,
        })
        .then((res) => {
          let arr1 = res.data.map((item) => {
            return item.creationTime;
          });
          let arr2 = res.data.map((item) => {
            return item.leftCoun;
          });
          let arr3 = res.data.map((item) => {
            return item.rightCount;
          });
          this.drawChart(arr1, arr2, arr3);
        });
        },
        drawChart(arr1, arr2, arr3) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      var myChart = echarts.init(document.getElementById("mounthData2"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "",
          subtext: '人数',
        },
        tooltip: {},
        legend: {
          top: "bottom",
          bottom: '5%',
          data: ['左区', '右区'],
        },
        xAxis: {
          data: arr1,
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            // rotate: 45,
            textStyle: {
              color: "#000",
              fontSize: "10",
              itemSize: "",
            },
          },
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: '左区',
            type: "bar",
            data: arr2,
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                color: "#34b934",
              },
            },
            barWidth: "18px",
          },
          {
            name: '右区',
            type: "bar",
            data: arr3,
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                color: "#FFAE36",
              },
            },
            barWidth: "18px",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      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>