bonus-ui/src/views/screen/cityScreen/components/equStatus/index.vue

<template>
  <div class="content">
    <div class="content-title"></div>
    <div class="content-view">
      <div id="lineChartFour" style="width: 100%; height: 85%"></div>
      <div class="text">备注说明：在用装备包含共享装备。</div>
    </div>
  </div>
</template>

<script>
import { equipmentStatusApi } from '@/api/screen/cityScreen'
import * as echarts from 'echarts'

export default {
  data() {
    return {
      myCharts4: null,
      barWidth: 40,
      size: [40, 20],
      Offset1: [-0, 10],
      Offset2: [-0, -10],
      fontSize: 20
    }
  },
  created() {
  },
  mounted() {
    console.log(window.innerWidth, window.innerHeight)
    if (window.innerWidth < 3000) {
      this.barWidth = 20
      this.size = [20, 5]
      this.Offset1 = [-0, 3]
      this.Offset2 = [-0, -3]
      this.fontSize = 10
    }
    this.InitEChartsOne()
  },
  methods: {
    InitEChartsOne() {
      equipmentStatusApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
        console.log(response, 'equipmentStatusApi')
        var dataList = response.data || []
        var xData = []
        var yData = []
        var rateData = []
        dataList.forEach((item) => {
          xData.push(item.name)
          yData.push(item.num)
          rateData.push(item.rate)
        })
        var option = {
          grid: {
            show: true,
            left: '10%',
            right: '2%',
            top: '12%',
            bottom: '12%',
            borderColor: 'transparent'
          },
          xAxis: {
            data: xData,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#ccc',
                fontSize: this.fontSize
              },
              margin: 10 //刻度标签与轴线之间的距离。
            }
          },
          yAxis: {
            // name:"单位：t",
            nameTextStyle: {
              color: '#ccc',
              fontSize: this.fontSize
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true
            },
            axisLabel: {
              textStyle: {
                color: '#ccc',
                fontSize: this.fontSize
              }
            }
          },
          series: [
            {
              type: 'bar',
              barWidth: this.barWidth,
              z: 10,
              itemStyle: {
                color: {
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#217CA7'
                    },
                    {
                      offset: 0.5,
                      color: '#217CA7'
                    },
                    {
                      offset: 0.5,
                      color: '#2B9CCC'
                    },
                    {
                      offset: 1,
                      color: '#2B9CCC'
                    }
                  ]
                }
              },
              label: {
                show: true,
                position: 'top',
                offset: 0,
                fontSize: this.fontSize,
                color: '#ccc',
                formatter: function(params) {
                  // console.log(params)
                  var str = params.value + '/' + rateData[params.dataIndex] + '%'
                  return str
                }
              },
              data: yData
            },
            {
              name: '',
              barWidth: this.barWidth,
              type: 'pictorialBar',
              symbol: 'diamond',
              symbolSize: this.size,
              symbolOffset: this.Offset1,
              z: 1,
              itemStyle: {
                color: {
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#217CA7'
                    },
                    {
                      offset: 0.5,
                      color: '#217CA7'
                    },
                    {
                      offset: 0.5,
                      color: '#2B9CCC'
                    },
                    {
                      offset: 1,
                      color: '#2B9CCC'
                    }
                  ]
                }
              },
              data: [1, 1, 1, 1]
            },
            {
              name: '',
              barWidth: this.barWidth,
              type: 'pictorialBar',
              symbol: 'diamond',
              symbolPosition: 'end',
              symbolSize: this.size,
              symbolOffset: this.Offset2,
              z: 50,
              itemStyle: {
                opacity: 1,
                color: '#2B9CCC'
              },
              data: yData
            }
          ]
        }
        this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'))
        this.myCharts4.setOption(option)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'DIN';
  src: url('../../../../../assets/font-family/DS-Digital/DS-TITle.ttf');
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content-title {
  width: 100%;
  height: 38px;
  padding-left: 12%;
  letter-spacing: 2px;
  background: url('../../../../../assets/images/cityScreen/7.png') no-repeat;
  background-size: 100% 100%;
  font-size: 24px;
  font-family: 'PingFang SC';
  color: #78d6ff;
  line-height: 38px;

  span {
    font-family: 'DIN';
    color: #78d6ff;
    background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.content-view {
  width: 100%;
  flex: 1;
}

.text {
  width: 100%;
  // margin-bottom: 10px;
  color: #a9c4f8;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
}

// @media screen and (min-width: 1080px) {
//     .title {
//         font-size: 10px;
//     }
//     .text {
//         font-size: 10px;
//     }
// }
// @media screen and (min-width: 3000px) {
//     .title {
//         font-size: 24px;
//     }
//     .text {
//         font-size: 24px;
//     }
// }
</style>