xjsaas-ui/src/views/big-screen/traffic-components/traffic-statistic.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-21 10:06:24
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-22 09:27:49
 * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
 * @Description: 交安事件大屏-交安事件统计
-->
<template>
  <div class="content">
    <div class="statistic-select">
      <el-select
        :popper-append-to-body="false"
        v-model="itemSelect"
        placeholder="请选择"
      >
        <el-option
          v-for="item in currentList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div ref="statisticChart" class="statistic-chart"></div>
    <div class="statistic-lenged">
      <div
        class="lenged-item"
        v-for="(item, index) in echartList"
        :key="`static-${index}`"
      >
        <div class="index" :style="{ backgroundColor: colorList[index] }"></div>
        <div class="name">{{ item.name }}</div>
        <div class="rate">{{ item.rate }}</div>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
export default {
  name: "TrafficStatistic",
  data() {
    return {
      // 下拉数据绑定
      itemSelect: "1",
      //   下拉框数据
      currentList: [
        {
          label: "分公司",
          value: "1",
        },
        {
          label: "分公司2",
          value: "2",
        },
        {
          label: "分公3",
          value: "3",
        },
        {
          label: "分公司4",
          value: "4",
        },
        {
          label: "分公司5",
          value: "5",
        },
      ],
      // 取色盘
      colorList: [
        "#18F7FF",
        "#6FC36F",
        "#4C83FF",
        "#FFEA68",
        "#FF8F5F",
        "#FC5976",
        "#AE74F3",
        "#4C21D5",
        "#6669DB",
      ],
      echartList: [
        {
          value: 335,
          name: "脱岗",
          rate: "110%",
        },
        {
          value: 234,
          name: "在岗",
          rate: "110%",
        },
        {
          value: 335,
          name: "比骚大苏打是",
          rate: "110%",
        },
        {
          value: 234,
          name: "发士大夫",
          rate: "110%",
        },
        {
          value: 335,
          name: "的风格",
          rate: "110%",
        },
        {
          value: 234,
          name: "返回",
          rate: "110%",
        },
      ],
    };
  },
  created() {
    this.getChartData();
  },
  methods: {
    /* 获取echart图数据 */
    getChartData() {
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    /* 绘制echart图 */
    drawChart() {
      const echart = echarts.init(this.$refs.statisticChart);
      echart.setOption({
        color: this.colorList,
        tooltip: {
          confine: true,
          backgroundColor: "rgba(9, 24, 48, 0.5)",
          borderColor: "rgba(75, 253, 238, 0.4)",
          textStyle: {
            fontSize: 12,
            color: "#808C9F",
          },
        },
        grid: {
          top: "0%",
          left: "0%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        legend: {
          show: false,
          orient: "horizontal",
          // itemWidth: 16,
          itemHeight: 16,
          icon: "circle",
          right: 40,
          bottom: "0%",
          textStyle: {
            color: "rgba(0,0,0,0.65)",
          },
          height: 10,
          formatter: (name) => {
            const value = this.echartList.find(
              (item) => item.name === name
            ).value;
            return `${name}：${value} 人`;
          },
        },
        series: [
          {
            type: "pie",
            radius: ["45%", "60%"],
            center: ["50%", "50%"],
            label: {
              // 鼠标悬浮具体数据显示
              show: false,
              position: "center",
              formatter: (params) => {
                return `{a|${params.percent.toFixed()}%}\n{b|${params.name}}`;
              },
              rich: {
                a: {
                  fontFamily:"DouYu",
                  fontSize: 28,
                  color: "rgba(255, 183, 89, 0.8)",
                },
                b: {
                  fontFamily:"DinBm",
                  fontSize: 12,
                  color: "#ffffff",
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            data: this.echartList,
          },
        ],
      });
      window.addEventListener("resize", () => {
        echart.resize();
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .statistic-select {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0.2rem;

    ::v-deep .el-select {
      width: 6.5rem;

      .el-input .el-select__caret {
        line-height: 1.5rem;
      }

      .el-input--medium .el-input__inner {
        height: 1.5rem;
        background-color: transparent;
        color: #89c5e8;
        border-color: #6991cd;
      }

      .el-select-dropdown {
        background-color: #102649;
        border-color: #08204f;
        .el-scrollbar {
          .el-select-dropdown__wrap {
            .el-scrollbar__view {
              .el-select-dropdown__item:hover {
                background-color: #2b4c7e;
              }

              .el-select-dropdown__item.selected {
                background-color: #2b4c7e;
              }

              .el-select-dropdown__item.hover {
                background-color: #2b4c7e;
              }
            }

            .el-select-dropdown__list {
              background-color: #102649;
            }
          }
        }
      }
    }
  }

  .statistic-chart {
    width: 50%;
    height: 100%;
    z-index: 0;
    background-image: url("../../../assets/screen/traffic/statistic-chart.png");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 100%;
  }

  .statistic-lenged {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 0;

    .lenged-item {
      width: 100%;
      height: 1rem;
      margin: 0.1rem 0;
      display: flex;
      align-items: center;
      color: #808c9f;
      font-size: 0.7rem;

      .index {
        width: 0.8rem;
        height: 0.5rem;
        margin-right: 0.5rem;
      }

      .name {
        width: 5rem;
      }

      .rate {
        font-size: 0.8rem;
        width: 2.5rem;
      }

      .value {
        font-size: 0.8rem;
        width: 3rem;
      }
    }
  }
}
</style>