智慧食堂数据展示中心

智慧食堂数据展示中心

提示

承接数据可视化大屏的开发定制，如需定制请：

联系作者或者 访问淘宝店铺--星空无限互联网工作室

1 开发技术

html+js+css+echarts

2 整体效果

3 部分代码展示

3.1 html代码

  <div id="headContainer">

      <h1>智慧食堂数据展示中心</h1>

      <span id="showTime" v-text="curTime+'   '+curDate"></span>

      <div id="logo"></div>

  </div>

  <div id="mainContainer">

      <div id="leftTop" class="panel">

          <div class="panelTitle">综合满意度</div>

          <div class="panelContent">

              <div id="leftTopTop">

                  <el-rate v-model="value" disabled show-score text-color="#ff9900" :score-template="scoreTemplate">

                  </el-rate>

              </div>

              <div id="leftTopBottom">

                  <div id="leftTopBottomLeft">

                      <div class="rowTop">

                          <div class="col">

                              <div class="row">

                                  <i class="far fa-smile" style="color: white;"></i>

                              </div>

                              <div class="row">满意</div>

                          </div>

                          <div class="col">

                              <div class="row">

                                  <i class="far fa-frown" style="color: white;"></i>

                              </div>

                              <div class="row">很满意</div>

                          </div>

                      </div>

                      <div class="rowBottom">满意度</div>

                  </div>

                  <div id="leftTopBottomRight">

                      <div class="rowTop">

                          <div class="col">

                              <div class="row">

                                  <i class="far fa-smile" style="color: white;"></i>

                              </div>

                              <div class="row">热情</div>

                          </div>

                          <div class="col">

                              <div class="row">

                                  <i class="far fa-frown" style="color: white;"></i>

                              </div>

                              <div class="row">一般</div>

                          </div>

                      </div>

                      <div class="rowBottom">服务态度</div>

                  </div>

              </div>

          </div>

      </div>

3.2 js代码

var myChart = echarts.init(document.querySelector("#leftMiddle>.panelContent"));

var option = {

  tooltip: {

      confine: true,

      trigger: 'item',

      borderColor: '#1fc6d0',

      backgroundColor: '#115498',

      textStyle: {

          color: '#fff',

      },

      borderWidth: 1,

      padding: 5,

  },

  legend: {

      show: false,

      bottom: "0%",

      itemWidth: 10,

      itemHeight: 10,

      textStyle: {

          color: "#ffffff",

          fontSize: 12,

      },

  },

  series: [

      {

          name: "饼图",

          type: "pie",

          radius: ['50%', '80%'],

          center: ["50%", "50%"],

          label: {

              textStyle: {

                  color: '#ffffff',

                  fontSize: 12,

              },

              formatter: '{b} {c}'

          },

          data: seriesData,

      },

  ],

};

myChart.setOption(option);

3.3 css代码

#pageContainer #mainContainer {

width: 1920px;

height: calc(100% - 80px);

margin: 0 auto;

display: grid;

grid-auto-flow: row dense;

grid-template-columns: 1fr 1.5fr 1fr;

grid-template-rows: 1fr 1fr 1.15fr;

grid-template-areas: "leftTop centerTop rightTop""leftMiddle centerMiddle rightMiddle""leftBottom centerBottom rightBottom";

}

#leftTop {

grid-area: leftTop;

}

#leftTop.panelContent {

display: flex;

flex-direction: column;

}

#leftTop.panelContent#leftTopTop {

height: 40%;

position: relative;

}

#leftTop.panelContent#leftTopTop.el-rate {

margin-top: 25px;

text-align: center;

height: 50px;

}

#leftTop.panelContent#leftTopTop.el-rate.el-rate__text {

font-size: 35px;

margin-left: 80px;

}

#leftTop.panelContent#leftTopTop.el-rate.el-rate__icon {

font-size: 50px;

}

#leftTop.panelContent#leftTopTop::after {

content: '';

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 3px;

background: linear-gradient(to right, transparent 10%, #3d95d5 50%, transparent 90%);

}