oil-station/fuintAdmin/src/views/indexcomponents/centenrindex.vue

<template>
  <div class="center" >
    <div class="left-box">
      <div class="but-box">
        <div class="hui"><span class="title-hei">各油品销售额</span> <span>15天交易金额总计：</span><span class="title-lan">79701</span> <span>元</span>  </div>
        <div >
          <el-radio-group v-model="radio"  size="mini">
            <el-radio-button label="周"></el-radio-button>
            <el-radio-button label="月"></el-radio-button>
            <el-radio-button label="年"></el-radio-button>

          </el-radio-group>
        </div>
      </div>
      <div id="chart" style="width: 100%; height: 400px;"></div>
    </div>
    <div class="right-box">
        <div class="title-hei">员工销售排行</div>
      <div class="four-box">
        <div class="pm">排名</div>
        <div class="mc">员工名称</div>
        <div class="xs">销售笔数</div>
        <div class="xse">销售额(万)</div>
      </div>
      <div class="four-boxx" v-for="(item,index) in 10" key="index">
        <div class="pm">{{index+1}}</div>
        <div class="dis">
          <div class="touxiang">
            <img src="../../../src/assets/images/avatar.png" class="touxiang">
          </div>
          <div class="name">名字</div>
        </div>
        <div class="xs">9999</div>
        <div class="xse">18975</div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "centenrindex",
  data(){
    return{
      radio:'周'
    }
  },
  mounted() {
    this.initChart()
  },
  methods:{
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))

      const option = {
        color: [
          '#77A8F9',
          '#86E1BB',
          '#8195F5',
          '#d48265',
          '#91c7ae',
          '#749f83',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3'
        ],
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '#92', '#95', '#98'],
            ['2023.1.1', 50, 85.8, 93.7],
            ['2023.2.1', 83.1, 73.4, 55.1],
            ['2023.3.1', 86.4, 65.2, 82.5],
            ['2023.4.1', 72.4, 53.9, 39.1],
            ['2023.5.1', 72.4, 53.9, 39.1],
            ['2023.6.1', 72.4, 53.9, 39.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar',  barCategoryGap: '40%' }, { type: 'bar',  barCategoryGap: '40%' }, { type: 'bar',  barCategoryGap: '40%' }]
      };

      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.center{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
}
.left-box{
  width: 70%;
  background: #FFFFFF;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 8px;
}
.right-box{
  width: 28%;
  background: #FFFFFF;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 8px;
  height: 455px;
  overflow: hidden;
}
.but-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hui{
  font-size: 14px;
  font-weight: 400;
  color: #999999;
}
.title-hei{
  font-size: 18px;
  font-weight: bold;
  color: #1a1a1a;
}
.title-lan{
  font-size: 16px;
  font-weight: bold;
  color: #4F6EE3;
}
.four-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 400;
  color: #999999;
}
.four-boxx{
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
}
.touxiang{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00acac;
  margin-right: 5px;
  overflow: hidden;
}
.dis{
  width: 30%;
  display: flex;
  align-items: center;

}
.pm{
  width: 10%;
  text-align: center;
}
.mc{
  width: 30%;
  text-align: left;
}
.xs{
  width: 30%;
  text-align: left;
}
.xs{
  width: 30%;
  text-align: center;
}
.xse{
  width: 30%;
  text-align: right;
}
</style>