devicesmgt/sgzb-screen/src/components/home/rightFour.vue

<template>
  <div class="access-rate-page">
    <div class="access-rate-box">
      <div class="access-rate-box-title-bg">
        <h5 class="access-rate-box-title">当月车辆使用分析</h5>
      </div>
      <div id="accessRateEchartsBar"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import CountFlopOne from './countFlopOne.vue'
import { getCarUseByMonthApi } from "../../api/screen";
export default {
  name: 'accessRatePage',
  components: {
    CountFlopOne
  },
  data() {
    return {
      carNoList: [],
      useNumList: [],
      squanderList: [],
      maType: ''
    }
  },
  mounted() {
    this.$eventBus.$on('maType', (maType) => {
      this.maType = maType
      this.getCarUseByMonthApiPage()
    });
    setInterval(() => {
      this.getCarUseByMonthApiPage()
    }, 60 * 1000);

  },
  destroyed() {
    this.$eventBus.$off('maType');
  },
  methods: {
    getCarUseByMonthApiPage() {
      this.carNoList = []
      this.useNumList = []
      this.squanderList = []
      let params = {
        maType: this.maType
      }
      getCarUseByMonthApi(params).then(res => {
        if (res.code == 200) {
          res.data.map(item => {
            this.carNoList.push(item.carNo)
            this.useNumList.push(item.useNum)
            this.squanderList.push(item.squander)
          })
          this.getInitData();
        }
      })
    },
    getInitData() {
      let option = {
        xAxis: [
          //左侧轴
          {
            type: "value",
            show: true,
            gridIndex: 0,
            inverse: true,
            // 是否显示轴线
            axisLine: {
              "show": false,
            },
            // 是否显示分割线
            splitLine: {
              "show": false
            },
            axisLabel: {
              show: true,
              color: '#c1c1c1',
              fontSize: 14,
            },
          },
          // 右侧轴
          {
            type: "value",
            show: true,
            gridIndex: 1,
            axisLine: {
              "show": false,
            },
            splitLine: {
              "show": false
            },
            axisLabel: {
              show: true,
              color: '#c1c1c1',
              fontSize: 14,
            },
          },
          // 底轴
          {
            "gridIndex": 2,
            "name": "x",
            // 名称位置
            "nameLocation": "center",
            // 名称向下偏移
            "nameGap": 40,
          }
        ],
        legend: {
          show: true,
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 10,
          icon: 'circle',
          x: "right",
          y: '4%',
          textStyle: {
            fontSize: '14px',
            fontWeight: 400,
            color: '#FFFFFF',
          },
        },
        "yAxis": [
          // 左轴
          {
            type: "category",
            gridIndex: 0,
            data: this.carNoList
          },
          {
            gridIndex: 1,
            type: "category",
            data: this.carNoList
          },
          {
            "name": "y",
            "gridIndex": 2,
            "type": "category",
            "nameGap": 25,
            splitLine: {
              show: false,
            },
            axisTick: { show: false },
            axisLabel: { show: false },
            axisLabel: {
              show: true,
              color: '#c1c1c1',
              fontSize: 14,
            },
            data: this.carNoList
          }
        ],
        "series":
          [
            // 左侧轴
            {
              name: "油耗",
              type: "bar",
              // 对应的左侧轴x轴索引
              xAxisIndex: 0,
              yAxisIndex: 0,
              // 柱体收缩，不会太粗
              barMaxWidth: "50%",
              data: this.squanderList,
              itemStyle: {
                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [20, 0, 0, 20],
                  color: "#1088DF",
                  label: {
                    show: true, //开启显示
                    position: 'inside',
                    textStyle: {
                      //数值样式
                      color: '#FFF',
                      fontSize: 12,
                      fontWeight: 400,
                    }
                  }
                }
              },
            },
            // 右侧轴
            {
              name: "使用频次",
              type: "bar",
              xAxisIndex: 1,
              yAxisIndex: 1,
              barWidth: "50%",
              data: this.useNumList,
              itemStyle: {
                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [0, 20, 20, 0],
                  color: "#00E6F4",
                  label: {
                    show: true, //开启显示
                    position: 'inside',
                    textStyle: {
                      //数值样式
                      color: '#000',
                      fontSize: 12,
                      fontWeight: 400,
                    }
                  }
                }
              },
              barGap: '0%'
            }
          ],
        grid: [
          {
            "show": true,
            "left": "15%",
            "top": "10%",
            "bottom": "15%",
            "width": "40%",
            borderWidth: 0
          },
          {
            "show": true,
            "left": "55%",
            "top": "10%",
            "bottom": "15%",
            "width": "40%",
            borderWidth: 0
          },
          // 底轴 覆盖左右两个坐标轴
          {
            "show": true,
            "left": "15%",
            "top": "10%",
            "bottom": "15%",
            "width": "80%",
            borderWidth: 0
          }
        ],
      }
      let myCharts = echarts.init(document.querySelector('#accessRateEchartsBar'));
      myCharts.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.access-rate-page {
  margin-bottom: 31px;

  .access-rate-box {
    .access-rate-box-title-bg {
      width: 433px;
      height: 50px;
      background: url(../../assets/img/myImage/title_left.png) no-repeat center;
      background-size: 100% 100%;
      position: relative;

      .access-rate-box-title {
        position: absolute;
        left: 6%;
        top: 28%;
        font-size: 20px;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 500;
        color: #ffffff;
        line-height: 23px;
        letter-spacing: 2px;
      }
    }

    #accessRateEchartsBar {
      width: 433px;
      height: 270px;
    }
  }
}
</style>