web-zk-h5/pages/mine/addNewPv/index.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 class="right-lines">
            <div class="item-s" v-for="item in list">
               
                <div class="bg-color" :style="{backgroundColor:`${item.color}`}"></div>
                <div>{{item.name}}</div>
            </div>
        </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

import * as api from '@/config/activity.js'
export default {
  data() {
    return {
      list:[{"name":'左区首购',"color":"#FF5151"},
                {"name":'左区复购',"color":"#BB0909"},
                {"name":'右区首购',"color":"#FFAE36"},
                {"name":'右区复购',"color":"#935801"}
            ],
      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(this.dateType)
      }, 50)
    },
    getDayType() {
      api.getDayType().then((res) => {
        this.dateTypeList = res.data
        this.dataName = res.data[0].label
        this.upDateCover(res.data[0].value)
      })
    },
    upDateCover(value) {
      api.getIndexAddAchieve({"dayType": value}).then((res) => {
        let time = []
        let arr1 = []
        let arr2 = []
        let arr3 = []
        let arr4 = []
        res.data.forEach((item) => {
          if (item.settleDate) {
            time.push(item.settleDate)
          }
          arr1.push(item.repANewPv)
          arr2.push(item.repBNewPv)
          arr3.push(item.bNewPv)
          arr4.push(item.aNewPv)
        })
        this.drawChart(arr1, arr2, arr3, arr4, time)
      })
    },
    drawChart(arr1, arr2, arr3, arr4, time) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      var myChart = echarts.init(document.getElementById('mounthData2'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '',
          subtext: '业绩（万）',
        },
        tooltip: {},
        legend: {
          top: 'bottom',
          bottom: '5%',
        },
        xAxis: {
          type: 'category',
          data: time,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#333',
              width: '1', // 坐标轴线线宽
              type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
            },
          },
          axisTick: {
            show: true, // 是否显示坐标轴刻度
            inside: true, // 坐标轴刻度是否朝内，默认朝外
            length: 5, // 坐标轴刻度的长度
            lineStyle: {
              color: '#FFF', // 刻度线的颜色
              width: 10, // 坐标轴刻度线宽
              type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            type: 'category',
            interval: 0,
            textStyle: {
              color: '#000',
              fontSize: '10',
              itemSize: '',
            },
            formatter: function (data) {
              return data
            },
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#CCCCCC',
              type: 'dashed', //虚线
            },
          },
        },
        series: [
          {
            data: arr4,
            type: 'line',
            color: '#FF5151',
            label: {
              show: false,
              position: 'right',
            },
            formatter: function (data) {
              console.error(data)
            },
          },
          {
            data: arr1,
            type: 'line',
            color: '#BB0909',
            label: {
              show: false,
              position: 'right',
            },
          },
          {
            data: arr3,
            type: 'line',
            color: '#FE9A02',
            label: {
              show: false,
              position: 'right',
            },
          },
          {
            data: arr2,
            type: 'line',
            color: '#935801',
            label: {
              show: false,
              position: 'right',
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      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: 10px;
  display: flex;
  justify-content: center; /* 水平居中 */
   align-items: center;     /* 垂直居中 */
  // width: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.item-s {
  // padding-bottom: 10px;
  display: flex;
  // line-height: 24px;
  align-items: center; 
  margin-right: 10rpx;
}

.bg-color {
  width: 20px;
  height: 10px;
  border-radius: 2px;
  margin-right: 10rpx;
}

.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>