新增订购品规以及走势图

README.md

@@ -3,4 +3,5 @@
 pc:http://localhost:3000/dashboard/3350a29b8fedcfebe3a40e4d12358626
 mobile:http://localhost:3000/m/dashboard/3350a29b8fedcfebe3a40e4d12358626
 
-用户id加密方式 AES（加密模式ECB 填充pkcs7padding 密码A930F2C3ACEA7B5B 偏移量B54480C3A296C334）+hex 参考链接:http://tool.chacuo.net/cryptaes
\ No newline at end of file
+用户id加密方式 AES（加密模式ECB 填充pkcs7padding 密码A930F2C3ACEA7B5B 偏移量B54480C3A296C334）+hex 参考链接:http://tool.chacuo.net/cryptaes
+

package.json

@@ -17,7 +17,8 @@
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "^3.4.0",
-    "recharts": "^2.0.0-beta.1"
+    "recharts": "^2.0.0-beta.1",
+    "echarts": "^4.6.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/view/Dashboard.css

@@ -13,41 +13,8 @@
 }
 
 .degreeContent {
-  height: 415px;
-}
-
-.degreeWrap {
-  max-height: 415px;
-  display: flex;
-  flex-wrap: wrap;
+  height: 230px;
   overflow: auto;
-  align-self: center;
-}
-
-.degreeWrapItem {
-  margin: 5px;
-  padding: 5px 10px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-.checked {
-  cursor: pointer;
-}
-
-.degreeWrapItem svg {
-  position: relative;
-  top: 2px;
-  color: #ff4d4f;
-}
-
-.checked svg {
-  color: #52c41a;
-}
-
-.degreeWrapItem .title {
-  margin-left: 10px;
-  font-size: .9rem;
 }
 
 .radarContent {

src/view/Line.jsx

+import React, { Component } from "react";
+import echarts from "echarts";
+
+class Line extends Component {
+
+  componentDidMount() {
+    // const { data } = this.props;
+
+    let xAxis = ['一月份订购数量','二月份订购数量','三月份订购数量'];
+    let series = [1000,800,1300];
+
+    var myChart = echarts.init(document.getElementById('line'));
+    myChart.setOption({
+      animation: true,
+      legend: {
+        show: false,
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      grid: {
+        left: '15%',
+        top: '15%',
+        bottom: '15%'
+      },
+      textStyle:{"color":"#333","fontSize":12},
+      xAxis: [{
+        type: 'category',
+        show: true,
+        name: '',
+        nameGap: 8,
+        nameTextStyle:{
+          padding: [8, 0, 0, 0],
+          verticalAlign: 'top'
+        },
+        interval:2,
+        splitLine: {
+          show: false,
+        },
+        axisTick: {show: false},
+        axisLabel: {
+          color: '#999999',
+          showMaxLabel: true
+        },
+        axisLine:{
+          lineStyle:{
+            color: '#b7b7b7'
+          }
+        },
+        data: xAxis
+      }],
+      yAxis: {
+        type: 'value',
+        show: true,
+        axisTick: {show: false},
+        splitNumber: 3,
+        splitLine: {
+          lineStyle:{
+            color: '#f2f2f2'
+          }
+        },
+        name: '',
+        nameTextStyle:{
+          padding: [0, 8, 0, 0],
+          align: 'right'
+        },
+        axisLabel: {
+          color: '#999999',
+        },
+        axisLine:{
+          lineStyle:{
+            color: '#b7b7b7'
+          }
+        }
+      },
+      series: [
+        {
+          name: '',
+          type: 'line', 
+          color: '#4091b0',
+          symbol: 'circle',
+          symbolSize: 6,
+          itemStyle:{
+            borderColor: '#fff',
+            borderWidth: 1
+          },
+          smooth: false,
+          data: series,
+          areaStyle: {}
+        }
+      ],
+    });
+
+    window.addEventListener("resize", () => { 
+      myChart.resize();  
+    });
+  }
+
+  render() {
+
+    return (
+      <React.Fragment>
+        <div id={"line"} style={{ width: '100%', height: '300px' }}></div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Line;

src/view/Pie.jsx

+import React, { Component } from "react";
+import echarts from "echarts";
+
+class Pie extends Component {
+
+  componentDidMount() {
+    const { data } = this.props;
+
+    let legendData = [], pieData = [];
+    data.map((item,i) =>{
+      legendData.push({
+        name: item.item_name,
+      });
+      pieData.push({
+        value: item.order_num,
+        name: item.item_name,
+      });
+
+      return item;
+    });
+
+    var myChart = echarts.init(document.getElementById('pie'));
+    myChart.setOption({
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b}: {c} ({d}%)'
+      },
+      legend: [
+        {
+          orient: 'vertical',
+          left: '0',
+          top: '20%',
+          data: legendData.slice(0,5)
+        },
+        {
+          orient: 'vertical',
+          right: '0',
+          top: '20%',
+          align: 'right',
+          data: legendData.slice(5,10)
+        },
+      ],
+      series: [
+        {
+          name: '访问来源',
+          type: 'pie',
+          radius: ['40%', '60%'],
+          avoidLabelOverlap: false,
+          label: {
+            normal: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              show: true,
+              textStyle: {
+                fontSize: '12',
+                fontWeight: 'bold'
+              }
+            }
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: pieData
+        }
+      ]
+    });
+
+    window.addEventListener("resize", () => { 
+      myChart.resize();  
+    });
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <div id='pie' style={{ width: '100%', height: '200px' }}></div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Pie;