xjsaas-ui/src/views/index-components/traffic-index.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-29 15:30:35
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-05 11:46:15
 * @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
 * @Description: 首页-路况评定
-->

<template>
  <div class="content">
    <div class="title">路况评定</div>
    <div class="traffic-table">
      <el-table :data="trafficTableData" style="width: 100%" height="180">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
    <div class="traffic-chart" ref="trafficChart"></div>
  </div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
  name: "TrafficIndex",
  data() {
    return {
      // 路况表格数据
      trafficTableData: [],
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    /* 获取表格数据 */
    getTableData() {
      this.trafficTableData = [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ];
      this.$nextTick(() => {
        this.drawTrafficChart();
      });
    },
    /* 绘制柱状图 */
    drawTrafficChart() {
      if (this.$refs.trafficChart) {
        const chart = echarts.init(this.$refs.trafficChart);
        chart.setOption({
          dataZoom: [
            {
              type: "inside",
              start: 0,
              end: 100,
            },
          ],
          title: [
            // 中心比例
            {
              text: "道路新增病害分布",
              x: "1%",
              y: "1%",
              textStyle: {
                fontSize: 14,
              },
            },
          ],
          legend: {
            show: true,
            right:"3%"
          },
          tooltip: {
            trigger: "axis",
            padding: [5, 10, 5, 10],
          },
          grid: {
            top: "20%",
            left: "7%",
            right: "4%",
            bottom: "12%",
          },
          xAxis: [
            {
              data: ["1月", "二月", "3", "4", "5", "6", "7", "8", "9", "10"],
              type: "category",
              axisTick: {
                show: false, //隐藏X轴刻度
              },
              axisLabel: { color: "#A2B0B8" },
              axisLine: {
                lineStyle: {
                  color: "#3C6579",
                  width: 1,
                },
              },
              splitLine: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              nameTextStyle: {
                color: "#fff",
                fontSize: 12,
              },
              name: "",
              type: "value",
              axisLabel: {
                show: true,
                color: "#9eaaba",
              },
              axisLine: { show: false },
              splitLine: { show: true },
            },
          ],
          series: [
            {
              name: "路产总数",
              type: "bar",
              barWidth: 20,
              itemStyle: {
                borderWidth: 1,
                borderRadius: [3, 3, 0, 0],
                color: "#388BD8",
              },
              data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
            },
            {
              name: "异常设施数量",
              type: "bar",
              barWidth: 20,
              itemStyle: {
                borderWidth: 1,
                borderRadius: [3, 3, 0, 0],
                color: "#38C8D8",
              },
              data: [20, 30, 35, 45, 55, 65, 75, 85, 95],
            },
          ],
        });
        window.addEventListener("resize", () => {
          chart.resize();
        });
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 1rem;

  .title {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    padding-left: 3rem;
    font-family: "DouYu";
    background: url("../../assets/index/div-title.png") no-repeat;
    background-size: 5%;
    background-position: 0 30%;
  }

  .traffic-table {
    width: 100%;
    height: 45%;

    ::v-deep .el-table tr {
      background-color: #f6f7fa;
    }
    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background-color: #f6f7fa;
    }
  }

  .traffic-chart {
    width: 100%;
    height: 45%;
  }
}
</style>