数据化看板（vue+Element+Echarts）

效果图：

由于一些原因无法上传整体的代码，只能放一些部分页面的代码。

Element-ui

Echarts

Echarts实例

-------------------------------------------------------------分割线-----------------------------------------------------------

首页代码：

<template>
  <div class="home-page-index">
    <div class="top-area-box">首页</div>
    <div class="body-area-box">
      <!-- 第一排按钮 -->
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round @click="pageOne">看板1</el-button></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round @click="pageTwo">看板2</el-button></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round @click="pageThree">看板3</el-button></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round @click="pageFour">看板4</el-button></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round @click="pageFive">看板5</el-button></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round>看板6</el-button></div>
        </el-col>
      </el-row>

      <!-- 第二排按钮 -->
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round>看板7</el-button></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round>看板8</el-button></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round>看板9</el-button></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round>看板10</el-button></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round>看板11</el-button></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"><el-button type="primary" round>看板12</el-button></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    pageOne() {
      // 使用 router-link 进行路由跳转
      this.$router.push('board1');
    },
    pageTwo() {
      // 使用 router-link 进行路由跳转
      this.$router.push('board2');
    },
    pageThree() {
      // 使用 router-link 进行路由跳转
      this.$router.push('board3');
    },
    pageFour() {
      // 使用 router-link 进行路由跳转
      this.$router.push('board4');
    },
    pageFive() {
      // 使用 router-link 进行路由跳转
      this.$router.push('board5');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.home-page-index {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/boatd1images/bg.jpg');
  background-size: cover;

  .top-area-box {
    width: 100%;
    height: 10%;
    font-size: 25px;
    color: #ffffff;
     // 文字投影
     text-shadow:
          0 0 10px #fff,
          0 0 40px #0782f5;
  }

  .body-area-box {
    width: 100%;
    height: 80%;
    padding: 5%;
    // background-color: aqua;
  }

  .el-row {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .el-col {
      border-radius: 4px;
    }

    .bg-purple-dark {
      background: #0b63dd;
    }

    .bg-purple {
      // background: #d3dce6;
    }

    .bg-purple-light {
      background: #e5e9f2;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 20px;
    }

    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
}</style>

子页面代码：

<template>
  <div class="board-index">
    <!-- 看板顶部区域 -->
    <div class="top-area-box">
      <!-- logo图片 -->
      <div class="logo-image">
        <img :src="logoImg" width="200px" height="70px" style="position:relative; top:20%; right:0%">
      </div>
      <!-- 标题文字 -->
      <div class="title-text">
        <b>下车架生产看板</b>
      </div>
      <!-- 实时时间 -->
      <div class="now-time">
        <div class="data"><b>{{ nowDate }}</b></div>
        <div class="time"><b>{{ nowTime }}</b></div>
      </div>
      <!-- 关闭按钮 -->
      <div class="off-button">
        <el-button icon="el-icon-switch-button" type="text" size="mini" circle @click="offButton"></el-button>
      </div>
    </div>

    <!-- 看板中间区域 -->
    <div class="middle-area-box">

      <!-- 图表1盒子 -->
      <div class="chart-one-box">
        <!-- 图表标题 -->
        <div class="chart-one-box-title">线边库存</div>
        <!-- 图表标题装饰图案  -->
        <img :src="titleImg" width="150vw" height="20vw"
          style="position:relative; bottom:4%; right:43%; transform: rotate(180deg);">
        <!-- 图表 -->
        <div class="chart-one">
          <!-- 滚动表格的表头 -->
          <table style="width:100%; height:10%" cellspacing="0" cellpadding="0">
            <thead style="clear: both;">
              <tr class="scroll-table-tr">
                <th style="width:20%">物料名称</th>
                <th style="width:27%">工位名称</th>
                <th style="width:16.6%">日消耗量</th>
                <th style="width:16.6%">线边库存</th>
                <th style="width:19.6%">原材料库存</th>
              </tr>
            </thead>
          </table>

          <!-- 滚动表格的表身 -->
          <vue-seamless-scroll :data="listData" :class-option="classOption" class="warp">
            <table style="width:100%; height:90%" cellspacing="0" cellpadding="0">
              <tbody class="item">
                <tr v-for="(item, index) in listData" :key="index" style="width:100%;  height: 100%; text-align:center;"
                  class="scroll-table-td">
                  <td class="data1" style="width:20%; text-align:center; font-size: 27px; ">{{ item.partName }}</td>
                  <td class="date2" style="width:27%; text-align:center; font-size: 27px;">{{ item.ulocName }}</td>
                  <td class="date5" style="width:16.6%; text-align:center; font-size: 27px; ">{{ item.useQty }}</td>
                  <td class="date3" style="width:16.6%; text-align:center; font-size: 27px; ">{{ item.xbQty }} </td>
                  <td class="date4" style="width:19.6%; text-align:center; font-size: 27px;">{{ item.qty }}</td>
                </tr>
              </tbody>
            </table>
          </vue-seamless-scroll>
        </div>

      </div>

      <!-- 图表2盒子 -->
      <div class="chart-two-box">
        <!-- 图表标题 -->
        <div class="chart-two-box-title">合计产量</div>
        <!-- 图表标题装饰图案  -->
        <img :src="titleImg" width="150vw" height="20vw"
          style="position:relative; bottom:4%; right:39%; transform: rotate(180deg);">
        <!-- 图表 -->
        <div class="chart-two">
          <div id="rightTopChart"></div>
        </div>
      </div>

      <!-- 图表3盒子 -->
      <div class="chart-three-box">
        <!-- 图表标题 -->
        <div class="chart-three-box-title">生产统计</div>
        <!-- 图表标题装饰图案  -->
        <img :src="titleImg" width="150vw" height="20vw"
          style="position:relative; bottom:4%; right:39%; transform: rotate(180deg);">
        <!-- 图表 -->
        <div class="chart-three">
          <div id="leftBottomChart"></div>
        </div>
      </div>

      <!-- 图表4盒子 -->
      <div class="chart-four-box">
        <!-- 图表标题 -->
        <div class="chart-four-box-title">能源统计</div>
        <!-- 图表标题装饰图案  -->
        <img :src="titleImg" width="150vw" height="20vw"
          style="position:relative; bottom:4%; right:39%; transform: rotate(180deg);">
        <!-- 图表 -->
        <div class="chart-four">
          <div id="rightBottomChart"></div>
        </div>
      </div>

    </div>

    <!-- 看板底部区域 -->
    <div class="bottom-area-box">
      <marquee class="marquee" align="absmiddle">打造国内领先 国际一流的建筑装备综合服务商</marquee>
    </div>

  </div>
</template>
  
<script>
import echarts from 'echarts' //引入echarts
import axios from 'axios' //引入 axios
import vueSeamlessScroll from 'vue-seamless-scroll' // 引入 滚动图表 scroll

export default {
  name: 'Example01Basic',
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      logoImg: require('@/assets/TZ-logo.png'),
      titleImg: require('@/assets/boatd1images/light.png'),
      nowDate: '', // 当前日期
      nowTime: '',// 当前时间
      // 滚动列表数据
      listData: [
        {
          partName: 'U型钢',
          ulocName: '人工组队',
          useQty: '6',
          xbQty: '7',
          qty: '1'
        },
        {
          partName: '履带梁',
          ulocName: '自动焊工位1',
          useQty: '4',
          xbQty: '0',
          qty: '0'
        },
        {
          partName: '35T下车架',
          ulocName: '人工补焊',
          useQty: '6',
          xbQty: '4',
          qty: '2'
        },
        {
          partName: '50T下车架',
          ulocName: '人工组队',
          useQty: '7',
          xbQty: '1',
          qty: '6'
        },
        {
          partName: '动力轮',
          ulocName: '自动焊工位2',
          useQty: '3',
          xbQty: '2',
          qty: '1'
        },
        {
          partName: '转向轮',
          ulocName: '自动焊工位2',
          useQty: '5',
          xbQty: '3',
          qty: '2'
        }
      ],
    }
  },
  created() {
    // 实时 时间 方法
    this.currentTime();
  },
  mounted() {
    //右上图表页面初始化挂载dom
    this.rightTopCharts();

    //左下图表页面初始化挂载dom
    this.leftBottomCharts();

    //左右下图表页面初始化挂载dom
    this.rightBottomCharts();
  },
  computed: {
    // 滚动列表设置
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  // 清除定时器
  destroyed() {
    clearInterval(this.resDate)
  },

  methods: {
    // 实时 时间 定时器
    currentTime() {
      setInterval(this.formatDate, 500)
    },
    // 实时 时间 获取
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day}  ${weekArr[week]}`
      this.nowTime = `${hour} : ${minute} : ${second}`
    },

    // 关闭按钮-路由跳转回首页
    offButton() {
      // 使用 router-link 进行路由跳转
      this.$router.push('/');
    },

    // 右上chart图表配置
    rightTopCharts() {
      var chartDom = document.getElementById('rightTopChart');
      var myChart = echarts.init(chartDom);
      window.onresize = myChart.resize;
      var option1;

      const data = [220, 182, 191, 234, 290, 330, 310]
      const sideData = data.map(item => item + 14.5)

      option1 = {
        tooltip: {
          trigger: 'axis',
          formatter: "{b} : {c}",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          //坐标轴
          axisLine: {
            lineStyle: {
              color: '#3eb2e8'
            }
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            }
          }
        },
        yAxis: {
          //坐标轴
          axisLine: {
            show: false
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            }
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: '#4784e8'
            }
          }
        },
        series: [
          // 主。柱状图
          {
            name: 'a',
            tooltip: {
              show: false
            },
            type: 'bar',
            barWidth: 23,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#0B4EC3" // 0% 处的颜色
                }, {
                  offset: 0.6,
                  color: "#138CEB" // 60% 处的颜色
                }, {
                  offset: 1,
                  color: "#17AAFE" // 100% 处的颜色
                }], false)
              }
            },
            data: data,
            barGap: 0
          },
          // 副。柱状图
          {
            type: 'bar',
            barWidth: 8,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#09337C" // 0% 处的颜色
                }, {
                  offset: 0.6,
                  color: "#0761C0" // 60% 处的颜色
                }, {
                  offset: 1,
                  color: "#0575DE" // 100% 处的颜色
                }], false)
              }
            },
            barGap: 0,
            data: sideData
          }, {
            name: 'b',
            tooltip: {
              show: false
            },
            type: 'pictorialBar',
            itemStyle: {
              borderWidth: 1,
              borderColor: '#0571D5',
              color: '#1779E0'
            },
            symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
            symbolSize: ['30', '9'],
            symbolOffset: ['0', '-9'],
            //symbolRotate: -5,
            symbolPosition: 'end',
            data: data,
            z: 3
          }]
      };

      option1 && myChart.setOption(option1);
    },

    // 左下chart图表配置
    leftBottomCharts() {
      var chartDom = document.getElementById('leftBottomChart');
      var myChart = echarts.init(chartDom);
      window.onresize = myChart.resize;
      var option2;

      var fontColor = '#fff';

      option2 = {
        color: ['#bf19ff', '#854cff', '#5f45ff', '#02cdff', '#0090ff', '#f9e264', '#f47a75', '#009db2', '#0780cf', '#765005'],
        textStyle: {
          fontSize: 18
        },
        title: {
          text: '',
          left: 'left',
          textStyle: {
            color: fontColor,
            align: 'center',
          }
        },
        grid: {
          left: '20',
          right: '50',
          bottom: '50',
          top: '80',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          }
        },
        legend: {
          show: true,
          x: 'center',
          top: '20',
          textStyle: {
            color: fontColor
          },
          data: ['动力轮', '转向轮', 'U型钢', '履带梁', '35T下车架', '50T下车架']
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            color: fontColor
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#397cbc'
            }
          },
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }],
        yAxis: [{
          type: 'value',
          name: '件',
          axisLine: {
            lineStyle: {
              color: fontColor
            }
          }
        }],
        series: [{
          name: '动力轮',
          type: 'line',
          stack: '总量',
          symbolSize: 8,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              areaStyle: {
                //color: '#94C9EC'
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(7,44,90,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(0,146,246,0.9)'
                }]),
              }
            }
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '转向轮',
          type: 'line',
          stack: '总量',
          symbol: 'circle',
          symbolSize: 8,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              areaStyle: {
                //color: '#94C9EC'
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(7,44,90,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(0,212,199,0.9)'
                }]),
              }
            }
          },
          data: [220, 182, 191, 210, 230, 270, 270]
        },
        {
          name: 'U型钢',
          type: 'line',
          stack: '总量',
          symbol: 'circle',
          symbolSize: 8,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              areaStyle: {
                //color: '#94C9EC'
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(7,44,90,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(114,144,89,0.9)'
                }]),
              }
            }
          },
          data: [150, 232, 201, 154, 190, 180, 210]
        },
        {
          name: '履带梁',
          type: 'line',
          stack: '总量',
          symbol: 'circle',
          symbolSize: 8,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              areaStyle: {
                //color: '#94C9EC'
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(7,46,101,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(0,166,246,0.9)'
                }]),
              }
            }
          },
          data: [150, 232, 201, 154, 190, 180, 210]
        },
        {
          name: '35T下车架',
          type: 'line',
          stack: '总量',
          symbol: 'circle',
          symbolSize: 8,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              areaStyle: {
                //color: '#94C9EC'
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(7,44,90,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(0,212,199,0.9)'
                }]),
              }
            }
          },
          data: [150, 232, 201, 154, 190, 180, 210]
        },
        {
          name: '50T下车架',
          type: 'line',
          stack: '总量',
          symbol: 'circle',
          symbolSize: 8,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              areaStyle: {
                //color: '#94C9EC'
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(7,44,90,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(0,212,199,0.9)'
                }]),
              }
            }
          },
          data: [200, 232, 201, 200, 190, 190, 210]
        }
        ]
      };

      option2 && myChart.setOption(option2);
    },

    // 右下chart图表配置
    rightBottomCharts() {
      var chartDom = document.getElementById('rightBottomChart');
      var myChart = echarts.init(chartDom);
      window.onresize = myChart.resize;
      var option3;

      var highlight = '#03b7c9';

      var demoData = [
        { name: '电压', value: 220, unit: 'V', pos: ['16.6%', '25%'], range: [0, 400] },
        { name: '电流', value: 32, unit: 'A', pos: ['49.8%', '25%'], range: [0, 60] },
        { name: '保护气', value: 0.9, pos: ['83%', '25%'], range: [0.1, 1.0], splitNum: 9 },
        { name: '有功功率', value: 6.34, unit: 'kW', pos: ['16.6%', '75%'], range: [0, 50] },
        { name: '有功电能', value: 6.28, unit: 'kWh', pos: ['49.8%', '75%'], range: [0, 50] },
        { name: '电网频率', value: 50, unit: 'Hz', pos: ['83%', '75%'], range: [0, 100] }
      ];

      option3 = {

        series: (function () {
          var result = [];

          demoData.forEach(function (item) {
            result.push(
              // 外围刻度
              {
                type: 'gauge',
                center: item.pos,
                radius: '30.33%',  // 1行3个
                splitNumber: item.splitNum || 10,
                min: item.range[0],
                max: item.range[1],
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [
                      [1, highlight]
                    ]
                  }
                },
                axisTick: {
                  show: true,
                  lineStyle: {
                    color: highlight,
                    width: 1
                  },
                  length: -5,
                  splitNumber: 10
                },
                splitLine: {
                  show: true,
                  length: -14,
                  lineStyle: {
                    color: highlight,
                  }
                },
                axisLabel: {
                  distance: -16,
                  textStyle: {
                    color: highlight,
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                },
                pointer: {
                  show: 0
                },
                detail: {
                  show: 0
                }
              },

              // 内侧指针、数值显示
              {
                name: item.name,
                type: 'gauge',
                center: item.pos,
                radius: '29.33%',
                startAngle: 225,
                endAngle: -45,
                min: item.range[0],
                max: item.range[1],
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 10,
                    color: [
                      [1, 'rgba(255,255,255,.1)']
                    ]
                  }
                },
                axisTick: {
                  show: 0,
                },
                splitLine: {
                  show: 0,
                },
                axisLabel: {
                  show: 0
                },
                pointer: {
                  show: true,
                  length: '100%'
                },
                detail: {
                  show: true,
                  offsetCenter: [0, '100%'],
                  textStyle: {
                    fontSize: 17,
                    color: '#fff'
                  },
                  formatter: [
                    '{value} ' + (item.unit || ''),
                    '{name|' + item.name + '}'
                  ].join('\n'),
                  rich: {
                    name: {
                      fontSize: 15,
                      lineHeight: 30,
                      color: '#ddd'
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: highlight,
                  }
                },
                data: [{
                  value: item.value
                }]
              }
            );
          });

          return result;
        })()
      };

      option3 && myChart.setOption(option3);
    }
  }
}
</script>
  
<style lang="scss">
.board-index {
  // 背景图片
  width: 100vw;
  height: 100vh;
  background: url('@/assets/boatd1images/bg.jpg');
  background-size: cover;

  // 顶部区域样式
  .top-area-box {
    width: 100%;
    height: 10%;
    background: url('@/assets/boatd1images/head_bg.png');
    background-size: cover;

    // logo样式
    .logo-image {
      float: left;
    }

    // 标题样式
    .title-text {
      width: 75%;
      height: 100%;
      float: left;
      font-family: SiYuan;
      line-height: 100%;
      font-size: 3vw;
      padding-top: 1%;
      color: #ffffff;
      // 文字投影
      text-shadow:
        0 0 10px #fff,
        0 0 40px #0782f5;
    }

    // 实时时间样式
    .now-time {
      width: 10%;
      height: 100%;
      float: right;
      font-family: kj-font;
      font-size: 1vw;
      color: aqua;
      text-shadow:
        0 0 10px #fff,
        0 0 40px aqua;
      position: relative;
      right: 2.5%;
    }

    // 关闭按钮样式
    .off-button {
      width: 4%;
      height: 100%;
      float: right;
      position: relative;
      left: 10%;
      // background-color: #f50808;
    }
  }

  // 中间区域样式
  .middle-area-box {
    width: 100%;
    height: 85%;
    padding: 1%;

    // 图表1盒子样式
    .chart-one-box {
      width: 49%;
      height: 49%;
      float: left;
      margin-right: 0.5%;
      margin-bottom: 0.5%;
      padding-top: 1%;
      padding-bottom: 1%;
      padding-left: 2%;
      // background-color: #0782f5;
      background: url('@/assets/boatd1images/k_1.png');
      background-size: 100% 100%;

      .chart-one {
        width: 95%;
        height: 88%;
        position: relative;
        bottom: 3%;

        .scroll-table-tr {
          background: url('@/assets/boatd1images/table_t.png');
          font-family: SiYuan;
          font-size: 1vw;
          color: #ffffff;
        }

        .scroll-table-td {
          background: url('@/assets/boatd1images/table_m.png');
          color: #ffffff;
        }

        .warp {
          height: 80%;
          width: 100%;
          margin: 0 auto;
          overflow: hidden;

          ul {
            list-style: none;
            padding: 0;
            margin: 0 auto;

            li,
            a {
              display: block;
              height: 50px;
              line-height: 30px;
              display: flex;
              justify-content: space-between;
              font-family: SiYuan;
              font-size: 20px;
            }
          }
        }
      }
    }

    // 图表2盒子样式
    .chart-two-box {
      width: 49%;
      height: 49%;
      float: left;
      margin-left: 0.5%;
      margin-bottom: 0.5%;
      // background-color: #0782f5;
      background: url('@/assets/boatd1images/k_1.png');
      background-size: 100% 100%;

      .chart-two {
        width: 95%;
        height: 88%;
        position: relative;
        bottom: 3%;


        #rightTopChart {
          width: 100%;
          height: 90%;
        }
      }
    }

    // 图表3盒子样式
    .chart-three-box {
      width: 49%;
      height: 49%;
      float: left;
      margin-right: 0.5%;
      margin-top: 0.5%;
      background: url('@/assets/boatd1images/k_1.png');
      background-size: 100% 100%;

      .chart-three {
        width: 95%;
        height: 88%;
        position: relative;
        bottom: 3%;


        #leftBottomChart {
          width: 100%;
          height: 90%;
        }
      }

    }

    // 图表4盒子样式
    .chart-four-box {
      width: 49%;
      height: 49%;
      float: left;
      margin-left: 0.5%;
      margin-top: 0.5%;
      background: url('@/assets/boatd1images/k_1.png');
      background-size: 100% 100%;

      .chart-four {
        width: 95%;
        height: 88%;
        position: relative;
        bottom: 5%;


        #rightBottomChart {
          width: 100%;
          height: 90%;
        }
      }

    }

    // 图表1标题样式
    .chart-one-box-title {
      font-size: 1.5vw;
      font-family: SiYuan;
      color: rgb(253, 255, 255);
      text-align: left;
    }

    // 图表2标题样式
    .chart-two-box-title {
      font-size: 1.5vw;
      font-family: SiYuan;
      color: rgb(253, 255, 255);
      text-align: left;
      padding-top: 2%;
      padding-left: 4%;
    }

    // 图表3标题样式
    .chart-three-box-title {
      font-size: 1.5vw;
      font-family: SiYuan;
      color: rgb(253, 255, 255);
      text-align: left;
      padding-top: 2%;
      padding-left: 4%;
    }

    // 图表4标题样式
    .chart-four-box-title {
      font-size: 1.5vw;
      font-family: SiYuan;
      color: rgb(253, 255, 255);
      text-align: left;
      padding-top: 2%;
      padding-left: 4%;
    }

  }

  // 底部区域样式
  .bottom-area-box {
    width: 100%;
    height: 15%;

    .marquee {
      width: 100%;
      height: 100%;
      font-size: 2vw;
      padding-top: 0.3%;
      color: white;
    }
  }

}
</style>