• Vue2+ElementUI 静态首页案例

     源码

    1. <template>
    2.   <div class="app-container home">
    3.     <el-row  type="flex" justify="space-around" class="row-bg">
    4.       <el-card class="box-card cardDiv1">
    5.         <el-col :span="5">
    6.           <div class="box-div card1">
    7.             <div class="webBox">
    8.               <div class="webO">今日交易额:</div>
    9.               <div class="webT">￥645334.45</div>
    10.             </div>
    11.           </div>
    12.         </el-col>
    13.         <el-col :span="5">
    14.           <div class="box-div card2">
    15.             <div class="webBox">
    16.               <div class="webO">今日订单数量:</div>
    17.               <div class="webT">7512</div>
    18.             </div>
    19.           </div>
    20.         </el-col>
    21.         <el-col :span="5">
    22.           <div class="box-div card3">
    23.             <div class="webBox">
    24.               <div class="webO">今日访问人数:</div>
    25.               <div class="webT">53101</div>
    26.             </div>
    27.           </div>
    28.         </el-col>
    29.         <el-col :span="5">
    30.           <div class="box-div card4">
    31.             <div class="webBox">
    32.               <div class="webO">今日新增用户:</div>
    33.               <div class="webT">8868</div>
    34.             </div>
    35.           </div>
    36.         </el-col>
    37.         <el-col :span="5">
    38.           <div class="box-div card5">
    39.             <div class="webBox">
    40.               <div class="webO">累计用户量:</div>
    41.               <div class="webT">895421</div>
    42.             </div>
    43.           </div>
    44.         </el-col>
    45.       </el-card>
    46.  
    47.     </el-row>
    48. <!--    <el-divider />-->
    49.     <el-row type="flex" justify="space-around" class="row-bg" style="margin-bottom:10px">
    50.       <el-col :span="10">
    51.         <el-card class="box-card" style="height: 320px;margin-right: 10px">
    52.           <div id="main1" style="height: 300px;width:700px">
    53.  
    54.           </div>
    55.         </el-card>
    56.       </el-col>
    57.       <el-col :span="7">
    58.         <el-card class="box-card" style="height: 320px;margin-right: 10px">
    59.         <div id="main2" style="height: 270px;width:400px">
    60.  
    61.         </div>
    62.         </el-card>
    63.       </el-col>
    64.       <el-col :span="7">
    65.         <el-card class="box-card" style="height: 320px;">
    66.           <div id="main3" style="height: 270px;width:400px">
    67.           </div>
    68.         </el-card>
    69.       </el-col>
    70.     </el-row>
    71. <!--    <el-divider />-->
    72.     <el-row type="flex" justify="space-around" class="row-bg" >
    73.         <el-col :span="14" style="margin-right: 10px">
    74.           <el-card class="box-card cardDiv2">
    75.             <div slot="header" class="clearfix">
    76.               <span style="margin-right: 30px">订单信息</span>
    77.               <el-badge :value="99" class="item">
    78.                 <el-button type="text" size="small">待处理订单</el-button>
    79.               </el-badge>
    80.               <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
    81.             </div>
    82.             <el-table
    83.               :data="tableData2"
    84.               height="300"
    85.               style="width: 100%">
    86.               <el-table-column
    87.                 prop="code"
    88.                 label="订单编号">
    89.               </el-table-column>
    90.               <el-table-column
    91.                 prop="date"
    92.                 label="下单日期">
    93.               </el-table-column>
    94.               <el-table-column
    95.                 prop="money"
    96.                 label="交易金额">
    97.               </el-table-column>
    98.               <el-table-column
    99.                 prop="name"
    100.                 label="客户名称">
    101.               </el-table-column>
    102.               <el-table-column
    103.                 prop="status"
    104.                 label="订单状态">
    105.                 <template slot-scope="scope">
    106.                   <span v-if="scope.row.status==='1'" style="color: #FF9933">待发货</span>
    107.                   <span v-if="scope.row.status==='2'" style="color: #FF5722">已退货</span>
    108.                   <span v-if="scope.row.status==='3'" style="color: #1890ff">已取消</span>
    109.                 </template>
    110.               </el-table-column>
    111.               <el-table-column
    112.                 label="操作">
    113.                 <template slot-scope="scope">
    114.                   <el-button  type="text" icon="el-icon-view" size="small">查看</el-button>
    115.                   <el-button type="text" icon="el-icon-edit" size="small">编辑</el-button>
    116.                 </template>
    117.               </el-table-column>
    118.             </el-table>
    119.           </el-card>
    120.         </el-col>
    121.       <el-col :span="10">
    122.         <el-card class="box-card cardDiv2">
    123.           <div slot="header" class="clearfix">
    124.             <span>客户信息</span>
    125.             <el-badge :value="99" class="item" style="visibility: hidden">
    126.               <el-button type="text" size="small">待处理订单</el-button>
    127.             </el-badge>
    128.             <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
    129.           </div>
    130.             <el-table
    131.               :data="tableData"
    132.               height="300"
    133.               style="width: 100%">
    134.               <el-table-column
    135.                 prop="name"
    136.                 label="客户名称">
    137.               </el-table-column>
    138.               <el-table-column
    139.                 prop="phone"
    140.                 label="联系电话">
    141.               </el-table-column>
    142.               <el-table-column
    143.                 prop="money"
    144.                 label="消费金额">
    145.               </el-table-column>
    146.               <el-table-column
    147.                 prop="level"
    148.                 label="会员级别">
    149.                 <template slot-scope="scope">
    150.  
    151.                   <span v-if="scope.row.level==='1'"><el-tag type="danger">至尊</el-tag></span>
    152.                   <span v-if="scope.row.level==='2'"><el-tag type="success">钻石</el-tag></span>
    153.                   <span v-if="scope.row.level==='3'"><el-tag type="warning">黄金</el-tag></span>
    154.                   <span v-if="scope.row.level==='4'"><el-tag type="info">普通</el-tag></span>
    155.                 </template>
    156.               </el-table-column>
    157.               <el-table-column
    158.                 label="操作">
    159.                 <template slot-scope="scope">
    160.                   <el-button  type="text" icon="el-icon-view" size="small">查看</el-button>
    161.                 </template>
    162.               </el-table-column>
    163.             </el-table>
    164.         </el-card>
    165.       </el-col>
    166.     </el-row>
    167.   </div>
    168. </template>
    169.  
    170. <script>
    171. import * as echarts from 'echarts'
    172. export default {
    173.   name: "Index",
    174.   data() {
    175.     return {
    176.       // 版本号
    177.       version: "3.8.6",
    178.       tableData: [{
    179.         money: '8856.56',
    180.         name: '张三',
    181.         phone: '18888888888',
    182.         level:'1'
    183.       }, {
    184.         money: '2384.50',
    185.         name: '李四',
    186.         phone: '18888888888',
    187.         level:'2'
    188.       }, {
    189.         money: '6000.20',
    190.         name: '王五',
    191.         phone: '13688888888',
    192.         level:'3'
    193.       }, {
    194.         money: '5558.34',
    195.         name: '赵六',
    196.         phone: '13688888888',
    197.         level:'4'
    198.       },
    199.         {
    200.           money: '1234.25',
    201.           name: '钱七',
    202.           phone: '13688888888',
    203.           level:'3'
    204.         },
    205.         {
    206.           money: '1234.25',
    207.           name: '钱七',
    208.           phone: '13688888888',
    209.           level:'3'
    210.         },
    211.         {
    212.           money: '1234.25',
    213.           name: '钱七',
    214.           phone: '13688888888',
    215.           level:'2'
    216.         }
    217.       ],
    218.       tableData2: [
    219.         {
    220.         date: '2016-05-02',
    221.         name: '张三',
    222.         code: '454545454234455',
    223.         money: '2422',
    224.         status: '1',
    225.       },
    226.       {
    227.         date: '2016-05-02',
    228.         name: '李四',
    229.         code: '234234234324234',
    230.         money: '7870.00',
    231.         status: '1',
    232.       },
    233.         {
    234.           date: '2016-05-02',
    235.           name: '王五',
    236.           code: '23523523544644',
    237.           money: '34545.2',
    238.           status: '1',
    239.         },
    240.         {
    241.           date: '2016-05-02',
    242.           name: '赵六',
    243.           code: '25235235235325',
    244.           money: '3430',
    245.           status: '2',
    246.         },
    247.         {
    248.           date: '2016-05-02',
    249.           name: '钱七',
    250.           code: '25235235235325',
    251.           money: '3430',
    252.           status: '3',
    253.         },
    254.       ]
    255.     };
    256.   },
    257.   created() {
    258.   },
    259.   mounted() {
    260.     this.setLineData()
    261.     this.setbData()
    262.     this.setBireData()
    263.   },
    264.   methods: {
    265.     goTarget(href) {
    266.       window.open(href, "_blank");
    267.     },
    268.     setLineData(){
    269.       var chartDom = document.getElementById('main1');
    270.       var myChart = echarts.init(chartDom);
    271.       var option;
    272.  
    273.       option = {
    274.         title: [{
    275.           text: '一周交易额',
    276.           textStyle: {
    277.             fontSize: 15
    278.           },
    279.  
    280.         },
    281.         {
    282.           text: '单位:万元',
    283.           left:'80%',
    284.           textStyle:{
    285.             fontSize:13,
    286.             fontWeight:100
    287.           }
    288.         }],
    289.         xAxis: {
    290.           type: 'category',
    291.           data: ['3-16', '3-17', '3-18', '3-19', '3-20', '3-21', '3-22']
    292.         },
    293.         yAxis: {
    294.           type: 'value',
    295.           splitLine:{
    296.             show:true,
    297.             lineStyle:{
    298.               type:'dashed'
    299.             }
    300.           }
    301.         },
    302.         series: [
    303.           {
    304.             data: [150, 230, 224, 218, 135, 147, 260],
    305.             type: 'line',
    306.             itemStyle: {
    307.               normal: {
    308.                 color: "#2ec7c9",
    309.                 lineStyle: {
    310.                   color: "rgb(30 198 149)"
    311.                 }
    312.               }
    313.             },
    314.           }
    315.         ]
    316.       };
    317.  
    318.       option && myChart.setOption(option);
    319.     },
    320.     setbData(){
    321.  
    322.       var chartDom = document.getElementById('main2');
    323.       var myChart = echarts.init(chartDom);
    324.       var option;
    325.  
    326.       option = {
    327.         color: ['#49bafc', '#e9898f', '#f7b230', '#bd92e1', '#26c8aa'],
    328.         title: {
    329.           text: '商品销售额占比',
    330.           left: 'left',
    331.           textStyle: {
    332.             fontSize: 15
    333.           },
    334.  
    335.         },
    336.         tooltip: {
    337.           trigger: 'item',
    338.           formatter: '{a} 
      {b} : {c} ({d}%)'
    339.         },
    340.         legend: {
    341.           bottom: 1,
    342.           left: 'center',
    343.           data: ['食品', '服装', '家电', '日用品', '原材料']
    344.         },
    345.         series: [
    346.           {
    347.             type: 'pie',
    348.             radius: '65%',
    349.             center: ['50%', '45%'],
    350.             selectedMode: 'single',
    351.             data: [
    352.               { value: 1548,name: '原材料'},
    353.               { value: 735, name: '日用品'},
    354.               { value: 510, name: '家电' },
    355.               { value: 434, name: '服装' },
    356.               { value: 335, name: '食品' }
    357.             ],
    358.             emphasis: {
    359.               itemStyle: {
    360.                 shadowBlur: 10,
    361.                 shadowOffsetX: 0,
    362.                 shadowColor: 'rgba(0, 0, 0, 0.5)'
    363.               }
    364.             }
    365.           }
    366.         ]
    367.       };
    368.  
    369.       option && myChart.setOption(option);
    370.  
    371.     },
    372.     setBireData(){
    373.       var chartDom = document.getElementById('main3');
    374.       var myChart = echarts.init(chartDom);
    375.       var option;
    376.  
    377.       option = {
    378.         title: {
    379.           text: '订单状态',
    380.           textStyle: {
    381.             fontSize: 15
    382.           },
    383.         },
    384.         tooltip: {
    385.           trigger: 'axis',
    386.           axisPointer: {
    387.             type: 'shadow'
    388.           }
    389.         },
    390.         legend: {},
    391.         grid: {
    392.           left: '3%',
    393.           right: '4%',
    394.           bottom: '3%',
    395.           containLabel: true,//设置自适应画布大小状态为开，也可通过设置left左移实现相同效果
    396.         },
    397.         xAxis: {
    398.           type: 'value',
    399.           boundaryGap: [0, 0.01],
    400.           splitLine:{
    401.             show:false
    402.           },
    403.           "axisLine":{     //x轴坐标轴
    404.             "show":false
    405.           },
    406.           axisLabel:{
    407.             show: false
    408.           },
    409.           axisTick: {		//x轴刻度线
    410.             show:false
    411.           },
    412.         },
    413.         yAxis: {
    414.           type: 'category', //纵向改成横向柱状图
    415.           data: ['今日取消订单', '今日评价订单','今日退货订单','今日发货订单',  ], //y轴显示文字
    416.           axisTick: {
    417.             show: false
    418.           },
    419.           axisLine: {
    420.             show: false,
    421.           },
    422.         },
    423.         series: [
    424.           {
    425.             name: '',
    426.             type: 'bar',
    427.             barWidth: 20,
    428.             showSymbol: false,
    429.             label:{ //柱状图显示数值
    430.               show:true,
    431.               position: 'insideTop', //内部顶部显示
    432.               textStyle: {
    433.                 color: '#FFF', //字体颜色
    434.                 fontSize: 14 //字体大小
    435.               }
    436.             },
    437.             data: [{
    438.               value:1546,
    439.               itemStyle: {
    440.                 normal: {
    441.                   barBorderRadius: [0, 6, 6, 0],
    442.                   color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //1000纵向柱状图渐变色 0100横向柱状图渐变色
    443.                     offset: 0,
    444.                     color: "rgba(30, 198, 149, 1)" // 0% 处的颜色
    445.                   }, {
    446.                     offset: 0.6,
    447.                     color: "rgba(30, 198, 149, 1)" // 60% 处的颜色
    448.                   }, {
    449.                     offset: 1,
    450.                     color: "rgba(51, 204, 204, 1)" // 100% 处的颜色
    451.                   }], false)
    452.                 }
    453.               },
    454.             },
    455.               {
    456.                 value:860,
    457.                 itemStyle: {
    458.                   normal: {
    459.                     barBorderRadius: [0, 6, 6, 0],//顺时针左上，右上，右下，左下）
    460.                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
    461.                       offset: 0,
    462.                       color: "rgba(170, 137, 254, 1)" // 0% 处的颜色
    463.                     }, {
    464.                       offset: 0.6,
    465.                       color: "rgba(170, 137, 254, 1)" // 60% 处的颜色
    466.                     }, {
    467.                       offset: 1,
    468.                       color: "rgba(204, 153, 204, 1)" // 100% 处的颜色
    469.                     }], false)
    470.                   }
    471.                 },
    472.  
    473.               },
    474.               {
    475.                 value:1022,
    476.                 itemStyle: {
    477.                   normal: {
    478.                     barBorderRadius: [0, 6, 6, 0],
    479.                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
    480.                       offset: 0,
    481.                       color: "rgba(226, 113, 140, 1)" // 0% 处的颜色
    482.                     }, {
    483.                       offset: 0.6,
    484.                       color: "rgba(244, 174, 149, 1)" // 60% 处的颜色
    485.                     }, {
    486.                       offset: 1,
    487.                       color: "rgba(244, 174, 149, 1)" // 100% 处的颜色
    488.                     }], false)
    489.                   }
    490.                 },
    491.  
    492.               },
    493.               {
    494.                 value:1600,
    495.                 itemStyle: {
    496.                   normal: {
    497.                     barBorderRadius: [0, 6, 6, 0],
    498.                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
    499.                       offset: 0,
    500.                       color: "rgba(255, 153, 51, 1)" // 0% 处的颜色
    501.                     }, {
    502.                       offset: 0.6,
    503.                       color: "rgba(255, 153, 51, 1)" // 60% 处的颜色
    504.                     }, {
    505.                       offset: 1,
    506.                       color: "rgba(239, 203, 45, 1)" // 100% 处的颜色
    507.                     }], false)
    508.                   }
    509.                 },
    510.               },
    511.  
    512.             ]
    513.           },
    514.         ]
    515.       };
    516.  
    517.       option && myChart.setOption(option);
    518.  
    519.     }
    520.   }
    521. };
    522. </script>
    523.  
    524. <style scoped lang="scss">
    525.   ::v-deep .el-card__body {
    526.     padding: 15px 20px 20px 20px;
    527.     display: flex;
    528.     justify-content: center;
    529.   }
    530.   .box-div{
    531.     height: 120px;
    532.     padding: 35px;
    533.     margin: 20px;
    534.   }
    535.   .cardDiv1{
    536.     width: 100%;
    537.     margin-bottom: 10px;
    538.   }
    539.   .cardDiv2{
    540.     width: 100%;
    541.     margin-bottom: 20px;
    542.   }
    543.   .app-container {
    544.     padding: 20px;
    545.     background: #eeeeee50;
    546.   }
    547. .home {
    548.   blockquote {
    549.     padding: 10px 20px;
    550.     margin: 0 0 20px;
    551.     font-size: 17.5px;
    552.     border-left: 5px solid #eee;
    553.   }
    554.   hr {
    555.     margin-top: 20px;
    556.     margin-bottom: 20px;
    557.     border: 0;
    558.     border-top: 1px solid #eee;
    559.   }
    560.   .col-item {
    561.     margin-bottom: 20px;
    562.   }
    563.  
    564.   ul {
    565.     padding: 0;
    566.     margin: 0;
    567.   }
    568.  
    569.   font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    570.   font-size: 13px;
    571.   color: #676a6c;
    572.   overflow-x: hidden;
    573.  
    574.   ul {
    575.     list-style-type: none;
    576.   }
    577.  
    578.   h4 {
    579.     margin-top: 0px;
    580.   }
    581.  
    582.   h2 {
    583.     margin-top: 10px;
    584.     font-size: 26px;
    585.     font-weight: 100;
    586.   }
    587.  
    588.   p {
    589.     margin-top: 10px;
    590.  
    591.     b {
    592.       font-weight: 700;
    593.     }
    594.   }
    595.  
    596.   .update-log {
    597.     ol {
    598.       display: block;
    599.       list-style-type: decimal;
    600.       margin-block-start: 1em;
    601.       margin-block-end: 1em;
    602.       margin-inline-start: 0;
    603.       margin-inline-end: 0;
    604.       padding-inline-start: 40px;
    605.     }
    606.   }
    607.   .webBox{
    608.     display: -webkit-box;
    609.     -webkit-box-orient: vertical;
    610.   }
    611.   .webO{
    612.     display: -webkit-box;
    613.     -webkit-box-pack: start;
    614.     -webkit-box-align: center;
    615.     font-size: 14px;
    616.     font-weight: 700;
    617.     color: #fff;
    618.   }
    619.   .webT{
    620.     display: -webkit-box;
    621.     -webkit-box-pack: end;
    622.     -webkit-box-align: center;
    623.     font-size: 20px;
    624.     font-weight: 700;
    625.     padding-right: 50px;
    626.     padding-top: 10px;
    627.     color: #fff;
    628.   }
    629.   .card1{
    630.     background: linear-gradient(180deg, rgba(30, 198, 149, 1) 0%, rgba(30, 198, 149, 1) 0%, rgba(51, 204, 204, 1) 100%, rgba(51, 204, 204, 1) 100%);
    631.     border: none;
    632.     border-radius: 4px;
    633.     box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    634.     font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    635.   }
    636.   .card2{
    637.     background: linear-gradient(90deg, rgba(244, 174, 149, 1) 0%, rgba(244, 174, 149, 1) 0%, rgba(226, 113, 140, 1) 100%, rgba(226, 113, 140, 1) 100%);
    638.     border: none;
    639.     border-radius: 4px;
    640.     box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    641.     font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    642.   }
    643.   .card3{
    644.     background: linear-gradient(180deg, rgba(255, 153, 51, 1) 0%, rgba(255, 153, 51, 1) 0%, rgba(239, 203, 45, 1) 100%, rgba(239, 203, 45, 1) 100%);
    645.     border: none;
    646.     border-radius: 4px;
    647.     box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    648.     font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    649.   }
    650.   .card4{
    651.     background: linear-gradient(180deg, rgba(45, 169, 250, 1) 0%, rgba(45, 169, 250, 1) 0%, rgba(102, 204, 255, 1) 100%, rgba(102, 204, 255, 1) 100%);
    652.     border: none;
    653.     border-radius: 4px;
    654.     box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    655.     font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    656.   }
    657.   .card5{
    658.     background: linear-gradient(180deg, rgba(170, 137, 254, 1) 0%, rgba(170, 137, 254, 1) 0%, rgba(204, 153, 204, 1) 100%, rgba(204, 153, 204, 1) 100%);
    659.     border: none;
    660.     border-radius: 4px;
    661.     box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    662.     font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    663.   }
    664. }
    665. </style>
    666.

  • 相关阅读:
    Kubernetes数据卷Volume和数据卷分类(emptyDir、nfs、hostPath、ConfigMap)详解
    常用损失函数详解：广泛使用的优化约束方法
    【数据库——MySQL（实战项目1）】（2）图书借阅系统
    【ELFK】之消息队列kafka
    web大作业 静态网页(地下城与勇士 10页 带视频)
    带你掌握Java各种日志框架
    GitOps 介绍
    JVM之【执行引擎】
    HTML整站规划与规范
    rust所有权
  • 原文地址：https://blog.csdn.net/huichao199175/article/details/133138639