devicesmgt/sgzb-screen/src/components/home/leftFour.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="deviceInventory"></div>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import CountFlopOne from './countFlopOne.vue'
  import { getTotalOwnershipByCompany } from "../../api/screen";
  
  export default {
    name: 'accessRatePage',
    components: {
      CountFlopOne
    },
    data() {
      return {
        nameList: [],
        valueList2: [],
        valueList: [],
        maType: ''
      }
    },
    mounted() {
      this.$eventBus.$on('maType', (maType) => {
        this.maType = maType
        this.getScrapAnalysisByMonthApiPage()
      });
      setInterval(() => {
        this.getScrapAnalysisByMonthApiPage()
      }, 60 * 1000);
    },
    destroyed() {
      this.$eventBus.$off('maType');
    },
    methods: {
      getScrapAnalysisByMonthApiPage() {
        // let params = {
        //   maType: this.maType
        // }
        this.nameList = []
        this.valueList2 = []
        this.valueList = []
        getTotalOwnershipByCompany().then(res => {
          if (res.code == 200) {
            this.nameList =  res.data.map(item => item.companyName)
            this.valueList =  res.data.map(item => item.totalOwnershipNum)
            //   this.nameList.push(item)
            // })
            // res.data.nameList.map(item => {
            //   this.nameList.push(item)
            // })
            // res.data.valueList.map(item => {
            //   this.valueList.push(item)
            // })
            // res.data.valueList2.map(item => {
            //   this.valueList2.push(item)
            // })
            this.getInitData();
          }
        })
      },
      getInitData() {
        var echartOption = {
            grid: {
                left: "5%",
                right: "5%",
                bottom: "5%",
                top: "10%",
                containLabel: true,
            },
            // tooltip: {
            //     trigger: "axis",
            //     axisPointer: {
            //     type: "none",
            //     },
            //     formatter: function (params) {
            //     return (
            //         params[0].name +
            //         "<br/>" +
            //         "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
            //         params[0].seriesName +
            //         " : " +
            //         Number(
            //         (params[0].value.toFixed(4) / 10000).toFixed(2)
            //         ).toLocaleString() +
            //         "<br/>"
            //     );
            //     },
            // },
            xAxis: {
                show: true,
                type: "value",
                splitLine: {
                    show: false,
                },
            },
            yAxis: [
                {
                type: "category",
                inverse: true,
                axisLabel: {
                    show: true,
                    textStyle: {
                    color: "#fff",
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: this.nameList,
                },
                {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    textStyle: {
                    color: "#ffffff",
                    fontSize: "12",
                    },
                    formatter: function (value) {
                    if (value >= 10000) {
                        return (value / 10000).toLocaleString() +'万';
                    } else {
                        return value.toLocaleString();
                    }
                    },
                },
                data: this.valueList,
                },
            ],
            series: [
                {
                name: "保有量",
                type: "bar",
                zlevel: 1,
                itemStyle: {
                    normal: {
                    barBorderRadius: 0,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                        offset: 0,
                        color: "#133062",
                        },
                        {
                        offset: 1,
                        color: "#60CBF9",
                        },
                    ]),
                    },
                },
                barWidth: 20,
                data: this.valueList,
                },
            ],
        };
        let myCharts = echarts.init(document.querySelector('#deviceInventory'));
        myCharts.setOption(echartOption)
      }
    }
  }
  </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;
        }
      }
      #deviceInventory {
        width: 433px;
        height: 500px;
      }
    }
  }
  </style>