baozhida-smart-distribution/src/components/CustomerWaybill.vue

<template>
  <!-- 全月运单量图表 -->
  <div style="width: 100%;height: 100%;">
    <div class="head_headlineUrl">
      <div>{{title}}</div>
      <timingFrame @changeTimeType="changeTimeType" @changeMonthTime="changeMonthTime" @changeYearTime="changeYearTime">
      </timingFrame>
    </div>
    <div class="card_collect_customer">
      <div class="head_search_customer space_between_in">
        <div class="customer_switchover">
          <div class="customer_rol center_in text_prohibition" :class="item.flag ? 'customer_active' : ''"
            v-for="(item,index) in list" :key="index" @click="selectRol(item)">{{item.title}}</div>
        </div>
      </div>
      <div id="monthCustomer"></div>
    </div>
  </div>
</template>

<script>
  import timingFrame from './timingFrame.vue'
  export default {
    name: 'CustomerWaybill',
    components: {
      timingFrame
    },
    props: {
      title: {
        type: String,
        default: () => '文字',
      },
      dataList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        value2: '',
        timeOut: null,
        list: [{
          id: 1,
          flag: true,
          title: '复核人',
          type: 'reCheck',
        }, {
          id: 2,
          flag: false,
          title: '配送员',
          type: 'delivery',
        }],
        myChart3: null,
      }
    },
    watch: {
      dataList: {
        handler(newVal) {
          if (newVal) {
            if (this.myChart3 && newVal.length > 0) {
              this.myChart3.clear()
              this.getCustomer(newVal)
            }
          }
        },
        deep: true, // 是否开启深度监听
        immediate: true,
      }
    },
    mounted() {
      this.getCustomer()
    },
    methods: {
      // 切换时间类型
      changeTimeType(event) {
        this.$emit('changeTimeType', event)
      },
      // 选择月
      changeMonthTime(event) {
        this.$emit('changeMonthTime', event)
      },
      // 选择年
      changeYearTime(event) {
        this.$emit('changeYearTime', event)
      },
      // 切换
      selectRol(event) {
        this.list.forEach(item => {
          if (item.id == event.id) {
            item.flag = true
          } else {
            item.flag = false
          }
        })
        this.$emit('changeUserType', event.type)
        this.$forceUpdate()
      },
      getCustomer(event) {
        var that = this
        var chartDom = document.getElementById('monthCustomer');
        that.myChart3 = that.$echarts.init(chartDom);
        let allData = [];
        if (event && event.length > 0) {
          allData = event
        }
        let showFlag = true
        if (allData.length > 0) {
          showFlag = false
        } else if (allData.length == 0) {
          showFlag = true
        }
        var option;
        option = {
          title: {
            show: showFlag,
            textStyle: {
              color: '#fff',
              fontSize: 16,
            },
            text: '暂无数据',
            left: 'center',
            top: 'center',
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            show: false
          },
          grid: {
            top: '0%',
            left: '20%',
            bottom: '6%',
          },
          // 加这块地方重点！！！！！！！
          dataZoom: [{
            yAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 7, // 一次性展示5个。
          }],
          xAxis: {
            type: "value",
            splitLine: {
              show: false
            },
            axisLabel: {
              color: '#fff',
              show: true
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          yAxis: [{
            type: "category",
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisPointer: {
              label: {
                show: true
              }
            },
            data: allData.map(item => item.name),
            axisLabel: {
              margin: 20,
              fontSize: 14,
              color: "#fff"
            }
          }, {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            offset: -10,
            zlevel: 100,
            show: true,
            position: "left",
            axisLabel: {
              show: false,
            },
            data: allData.map(item => item.count)
          }],
          series: [{
            z: 2,
            name: "数量",
            type: "bar",
            align: "left",
            //   barCategoryGap: '50%',
            data: allData
              .map(item => item.count)
              .map((item, i) => {
                return {
                  value: item,
                  itemStyle: {
                    color: "rgba(3, 124, 213, 0.5)"
                  }
                };
              }),
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#fff",
                fontSize: 12,
                formatter: function(value) {
                  let val = (value && value.data && value.data.value) || 0;
                  return parseFloat(val);
                }
              }
            }
          }]
        };
        if (allData.length > 7) {
          autoMove()
        }

        function autoMove() {
          // 自动滚动：
          that.timeOut = setInterval(() => {
            if (option.dataZoom[0].endValue == allData.length) {
              option.dataZoom[0].endValue = 7;
              option.dataZoom[0].startValue = 0;
            } else {
              option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
              option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
            }
            that.myChart3.setOption(option);
            that.myChart3.on('mouseover', stop)
            that.myChart3.on('mouseout', goMove)
          }, 2000)
        }
        //停止滚动
        function stop() {
          clearInterval(that.timeOut)
        }
        //继续滚动
        function goMove() {
          autoMove()
        }
        that.myChart3.setOption(option);
      },
      getResize() {
        this.myChart3.resize();
      },
    }
  }
</script>

<style lang="scss">
  .head_headlineUrl {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 40px;
    margin-left: 10px;
    margin-right: 20px;
    width: calc(100% - 70px);
    height: 50px;
    font-size: 18px;
    color: #fff;
    background: url(../../src/assets/images/headlineUrl.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .card_collect_customer {
    padding-left: 10px;
    width: calc(100% - 30px);
    height: calc(100% - 100px);
  }

  .head_search_customer {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
  }

  .customer_switchover {
    display: flex;
    align-items: center;
  }

  .customer_rol {
    cursor: pointer;
    width: 50px;
    height: 30px;
    font-size: 13px;
    color: #ffffff;
    background-color: rgba(7, 56, 78, 1);
  }

  .customer_active {
    background-color: rgba(4, 137, 170, 1);
  }

  #monthCustomer {
    width: 100%;
    height: 100%;
  }
</style>