bonus-ui/src/views/screen/wsScreen/components/right/EquipItemMore.vue

<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      v-loading="isLoading"
      :visible.sync="dialogVisible"
      width="36%"
      :modal="false"
      class="dlg-box"
    >
      <div>
        <!-- 自定义title -->
        <i class="close-btn" @click="dialogVisible = false" />
        <div class="dlg-title">{{ title }}</div>

        <div ref="category" style="height: 300px"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  // props: {
  //   title: {
  //     type: String,
  //     default: '',
  //   },
  //   dlgParams: {
  //     type: Object,
  //     default: () => {},
  //   },
  // },
  data() {
    return {
      isLoading: false,
      dialogVisible: false,
      title: '',
      unit: '',
    }
  },
  methods: {
    openDialog(type) {
      if (type == 1) {
        this.title = '装备在用率'
        this.unit = '%'
      } else {
        this.title = '装备周转率'
        this.unit = '次'
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.initLineChart()
      })
    },
    initLineChart() {
      const chartDom = this.$refs.category
      if (!chartDom) return

      const myChart = echarts.init(chartDom)

      const categories = ['2020', '2021', '2022', '2023', '2024', '2025']

      // 三条折线的假数据
      const data1 = Array.from({ length: 6 }, () => Math.floor(Math.random() * 1000 + 500))
      const data2 = Array.from({ length: 6 }, () => Math.floor(Math.random() * 800 + 300))
      const data3 = Array.from({ length: 6 }, () => Math.floor(Math.random() * 600 + 200))

      const option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['线路', '变电', '电缆'],
          textStyle: { color: '#fff' },
          top: 10,
          right: 10,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: categories,
          axisLine: { lineStyle: { color: '#ccc' } },
          splitLine: { show: false },
        },
        yAxis: {
          type: 'value',
          name: `单位：${this.unit}`,
          axisLine: { show: false },
          splitLine: { show: false },
        },
        series: [
          {
            name: '线路',
            data: data1,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: { width: 2, color: '#4facfe' },
            label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0, 90, 170, 0.8)' },
                { offset: 1, color: 'rgba(0, 180, 255, 0.05)' },
              ]),
            },
          },
          {
            name: '电缆',
            data: data3,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: { width: 2, color: '#43e97b' },
            label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 140, 0, 0.8)' },
                { offset: 1, color: 'rgba(255, 200, 0, 0.05)' },
              ]),
            },
          },
          {
            name: '变电',
            data: data2,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: { width: 2, color: '#ffae00' },
            label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0, 150, 80, 0.8)' },
                { offset: 1, color: 'rgba(0, 255, 130, 0.05)' },
              ]),
            },
          },
        ],
      }

      myChart.setOption(option)
      window.addEventListener('resize', () => myChart.resize())
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background: transparent !important;
}

::v-deep .el-dialog .el-dialog__body {
  background-image: url('../../img/right-dialog.png');
  background-size: 100% auto;
  color: #fff;
}
::v-deep .el-dialog__header {
  display: none;
}
.table-container {
  color: #fff;
  background-color: #04112a80;
}
.dlg-box {
  position: absolute;
  .close-btn {
    width: 39px;
    height: 39px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background-image: url('../../img/close.png');
    background-size: 100% 100%;
  }
  .dlg-title {
    margin-top: -25px;
    margin-bottom: 45px;
    font-size: 21px;
    text-align: center;
    font-weight: 800;
  }
}
</style>