From 529fd56c5336cdee23cb30cbdfe3c128ee5c8415 Mon Sep 17 00:00:00 2001
From: caoyizhong <1270296080@qq.com>
Date: Tue, 11 Oct 2022 18:19:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A22?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/Analysis.vue    |  16 +-
 src/views/dashboard/NewHomePage.vue | 434 +++++++++++++++++++++++++++-
 2 files changed, 429 insertions(+), 21 deletions(-)

diff --git a/src/views/dashboard/Analysis.vue b/src/views/dashboard/Analysis.vue
index 558259b..237d303 100644
--- a/src/views/dashboard/Analysis.vue
+++ b/src/views/dashboard/Analysis.vue
@@ -7,14 +7,14 @@
     <NewHomePage v-if="indexStyle == 1"/>
     <index-bdc v-if="indexStyle==2"></index-bdc>
     <index-task v-if="indexStyle==3"></index-task>
-    <div style="width: 100%;text-align: right;margin-top: 20px">
-      请选择首页样式：
-      <a-radio-group v-model="indexStyle">
-        <a-radio :value="1">统计图表</a-radio>
-        <a-radio :value="2">统计图表2</a-radio>
-        <a-radio :value="3">任务表格</a-radio>
-      </a-radio-group>
-    </div>
+<!--    <div style="width: 100%;text-align: right;margin-top: 20px">-->
+<!--      请选择首页样式：-->
+<!--      <a-radio-group v-model="indexStyle">-->
+<!--        <a-radio :value="1">统计图表</a-radio>-->
+<!--        <a-radio :value="2">统计图表2</a-radio>-->
+<!--        <a-radio :value="3">任务表格</a-radio>-->
+<!--      </a-radio-group>-->
+<!--    </div>-->
   </div>
 </template>
 
diff --git a/src/views/dashboard/NewHomePage.vue b/src/views/dashboard/NewHomePage.vue
index 1ebb062..afd6bf3 100644
--- a/src/views/dashboard/NewHomePage.vue
+++ b/src/views/dashboard/NewHomePage.vue
@@ -4,16 +4,15 @@
       <div style="display: flex;align-items: center;justify-content: stretch;width: 100%;height: 50%">
         <div style="width: 50%;padding-left: 10%;height: 100%">
           <a-card title="公司制度" style="width: 100%;height: 100%">
-            <template #extra><a href="#">more</a></template>
-            <p>card content</p>
-            <p>card content</p>
-            <p>card content</p>
+            <template #extra><a-button type="primary">more</a-button></template>
+            <p>物资管理实施细则</p>
+            <a-divider style="border: 1px solid #000000"/>
           </a-card>
         </div>
 
         <div style="width: 50%;padding-left: 10%;height: 100%">
           <a-card title="站内消息" style="width: 100%;height: 100%">
-            <template #extra><a href="#">more</a></template>
+            <template #extra><a-button type="primary">more</a-button></template>
             <p>card content</p>
             <p>card content</p>
             <p>card content</p>
@@ -21,18 +20,17 @@
         </div>
       </div>
       <div style="width: 100%;margin-top: 5%;margin-left: 5%;height: 50%">
-        <a-card title="Default size card" style="width: 100%;height: 90%">
-          <template #extra><a href="#">more</a></template>
-          <p>card content</p>
-          <p>card content</p>
-          <p>card content</p>
+        <a-card title="数据图表" style="width: 100%;height: 90%">
+          <template #extra><a-button type="primary">more</a-button></template>
+          <div id="zhu" style="width: 24%;height: 260px;display:inline-block; "></div>
+          <div id="zhu1" style="width: 24%;height: 260px;display:inline-block; margin-left: 1%"></div>
+          <div id="zhu2" style="width: 24%;height: 260px;display:inline-block;margin-left: 1% "></div>
+          <div id="zhu3" style="width: 24%;height: 260px;display:inline-block;margin-left: 1% "></div>
         </a-card>
       </div>
     </div>
     <div>
 
-
-
     </div>
 
 
@@ -42,8 +40,418 @@
 </template>
 
 <script>
+import * as echarts from 'echarts'
+
+
+
 export default {
-name: "NewHomePage"
+name: "NewHomePage",
+  data(){
+
+  },
+  mounted() {
+    this.echartsZhu();
+  },
+  methods:{
+      echartsZhu(){
+        let app = {};
+        // let chartDom = ;
+        let myChart = echarts.init(document.getElementById('zhu'));
+        let myChart1 = echarts.init(document.getElementById('zhu1'));
+        let myChart2 = echarts.init(document.getElementById('zhu2'));
+        let myChart3 = echarts.init(document.getElementById('zhu3'));
+
+       let option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            data: ['数据一', '数据二']
+          },
+          // toolbox: {
+          //   show: true,
+          //   orient: 'vertical',
+          //   left: 'right',
+          //   top: 'center',
+          //   feature: {
+          //     mark: { show: true },
+          //     dataView: { show: true, readOnly: false },
+          //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
+          //     restore: { show: true },
+          //     saveAsImage: { show: true }
+          //   }
+          // },
+         grid: {
+           x: 45,//左边
+           y: 45,// 上边
+           x2: 55, //右边
+           y2: 75, //下边
+           borderWidth: 1,
+         },
+          xAxis: [
+            {
+              type: 'category',
+              axisTick: { show: false },
+              data: ['一月', '二月', '三月', '四月', '五月']
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              // scale:'true',
+            }
+          ],
+          series: [
+            {
+              name: '数据一',
+              type: 'bar',
+              barGap: 0,
+              // label: labelOption,
+              // emphasis: {
+              //   focus: 'series'
+              // },
+              // showBackground: true,
+              data: [120, 132, 101, 134, 190],
+              itemStyle: {
+                  //这里是颜色
+                  color: '#1567cd'
+              }
+            },
+            {
+              name: '数据二',
+              type: 'bar',
+              // label: labelOption,
+              // emphasis: {
+              //   focus: 'series'
+              // },
+              // showBackground: true,
+              data: [98, 77, 101, 99, 40],
+              itemStyle: {
+                //这里是颜色
+                color: '#5ab9d7'
+              }
+            }
+          ]
+        };
+        // let option1 = {
+        //   // title: {
+        //   //   text: 'Stacked Line'
+        //   // },
+        //   tooltip: {
+        //     trigger: 'axis',
+        //     showContent: false
+        //   },
+        //   legend: {
+        //     data: ['数据一', '数据二']
+        //   },
+        //   grid: {
+        //     left: '3%',
+        //     right: '4%',
+        //     bottom: '3%',
+        //     containLabel: true
+        //   },
+        //   // toolbox: {
+        //   //   feature: {
+        //   //     saveAsImage: {}
+        //   //   }
+        //   // },
+        //   xAxis: {
+        //     type: 'category',
+        //     boundaryGap: false,
+        //     data: ['一月', '二月', '三月', '四月', '五月']
+        //   },
+        //   yAxis: {
+        //     type: 'value',
+        // //y轴区域内【x轴平行线】
+        // splitLine: {
+        //   show: true,
+        //     lineStyle:{
+        //     type:'dashed',
+        //       color: "#4f4f9d",
+        //   }
+        // },
+        //   },
+        //   series: [
+        //     {
+        //       name: '数据一',
+        //       type: 'line',
+        //       // smooth: true,
+        //       stack: 'Total',
+        //       data: [120, 132, 101, 1134, 190, 230, 1210]
+        //     },
+        //     {
+        //       name: '数据二',
+        //       // smooth: true,
+        //       type: 'line',
+        //       stack: 'Total',
+        //       data: [1120, 132, 101, 34, 90, 30, 120]
+        //     }
+        //   ]
+        // };
+        const colors = ['#5470C6', '#EE6666'];
+       let  option1 = {
+          color: colors,
+          tooltip: {
+            // trigger: 'none',
+            // axisPointer: {
+            //   type: 'cross'
+            // }
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            // data: ['数据一', '数据二']
+          },
+          grid: {
+            top: 70,
+            bottom: 50
+          },
+         xAxis: [
+           {
+             type: 'category',
+             axisTick: {
+               alignWithLabel: true
+             },
+             axisLine: {
+               onZero: false,
+               lineStyle: {
+                 color: colors[1]
+               }
+             },
+             axisPointer: {
+               // label: {
+               //   formatter: function (params) {
+               //     return (
+               //       '数据  ' +
+               //       params.value +
+               //       (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+               //     );
+               //   }
+               // }
+             },
+             // prettier-ignore
+             data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+           },
+           {
+             type: 'category',
+             axisTick: {
+               alignWithLabel: true
+             },
+             axisLine: {
+               onZero: false,
+               lineStyle: {
+                 color: colors[0]
+               }
+             },
+             axisPointer: {
+               // label: {
+               //   formatter: function (params) {
+               //     return (
+               //       '数据  ' +
+               //       params.value +
+               //       (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+               //     );
+               //   }
+               // }
+             },
+             // prettier-ignore
+             data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+           }
+         ],
+          // xAxis: [
+          //   {
+          //     type: 'category',
+          //     axisTick: {
+          //       alignWithLabel: true
+          //     },
+          //     axisLine: {
+          //       onZero: false,
+          //       lineStyle: {
+          //         color: colors[1]
+          //       }
+          //     },
+          //     axisPointer: {
+          //       // label: {
+          //       //   formatter: function (params) {
+          //       //     return (
+          //       //       '数据  ' +
+          //       //       params.value +
+          //       //       (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+          //       //     );
+          //       //   }
+          //       // }
+          //     },
+          //     // prettier-ignore
+          //     data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+          //   },
+          //   {
+          //     type: 'category',
+          //     axisTick: {
+          //       alignWithLabel: true
+          //     },
+          //     axisLine: {
+          //       onZero: false,
+          //       lineStyle: {
+          //         color: colors[0]
+          //       }
+          //     },
+          //     axisPointer: {
+          //       // label: {
+          //       //   formatter: function (params) {
+          //       //     return (
+          //       //       '数据  ' +
+          //       //       params.value +
+          //       //       (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+          //       //     );
+          //       //   }
+          //       // }
+          //     },
+          //     // prettier-ignore
+          //       data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+          //   }
+          // ],
+          yAxis: [
+            {
+              type: 'value'
+            }
+          ],
+          series: [
+            {
+              name: '数据一',
+              type: 'line',
+              xAxisIndex: 1,
+              // smooth: true,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [
+                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+              ]
+            },
+            {
+              name: '数据二',
+              type: 'line',
+              // smooth: true,
+              emphasis: {
+                focus: 'series'
+              },
+              data: [
+                3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
+              ]
+            }
+          ]
+        };
+        let option2 = {
+          // title: {
+          //   text: 'Referer of a Website',
+          //   subtext: 'Fake Data',
+          //   left: 'center'
+          // },
+          tooltip: {
+            trigger: 'item', ////item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            },
+            formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
+          },
+          legend: {
+            // orient: 'vertical',
+            left: 'center'
+          },
+          series: [
+            {
+              name: '',
+              type: 'pie',
+              radius: '50%',
+              data: [
+                { value: 1048, name: '项目1' },
+                { value: 735, name: '项目2' },
+                { value: 580, name: '项目3' },
+                { value: 484, name: '项目4' },
+                { value: 300, name: '项目5' }
+              ],
+              itemStyle:{
+                normal:{
+                  label:{
+                    show: true,
+                    formatter: '{c}'
+         },
+        labelLine :{show:true}
+      }
+      },
+        emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
+        };
+
+       let option3 = {
+          // title: {
+          //   text: 'Basic Radar Chart'
+          // },
+          legend: {
+            data: ['数据一', '数据二']
+          },
+         tooltip: {
+           trigger: 'item', ////item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
+           axisPointer: {
+             // 坐标轴指示器，坐标轴触发有效
+             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+           },
+           formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
+         },
+         grid: {
+           x: 45,//左边
+           y: 45,// 上边
+           x2: 55, //右边
+           y2: 75, //下边
+           borderWidth: 1,
+         },
+          radar: {
+            // shape: 'circle',
+            indicator: [
+              { name: '一月', max: 6500 },
+              { name: '二月', max: 16000 },
+              { name: '三月', max: 30000 },
+              { name: '四月', max: 38000 },
+              { name: '五月', max: 52000 },
+              { name: '六月', max: 25000 }
+            ]
+          },
+          series: [
+            {
+              name: '',
+              type: 'radar',
+              data: [
+                {
+                  value: [4200, 3000, 20000, 35000, 50000, 18000],
+                  name: '数据一'
+                },
+                {
+                  value: [5000, 14000, 28000, 26000, 42000, 21000],
+                  name: '数据二'
+                }
+              ]
+            }
+          ]
+        };
+        myChart.setOption(option)// 给生成的echarts实例进行传递配置项option
+        myChart1.setOption(option1)// 给生成的echarts实例进行传递配置项option
+        myChart2.setOption(option2)// 给生成的echarts实例进行传递配置项option
+        myChart3.setOption(option3)// 给生成的echarts实例进行传递配置项option
+      },
+  }
 }
 </script>