sales charts

README.md

@@ -17,6 +17,7 @@
 - [x] 主布局示例
 - [x] 数据列表
 - [x] 表单相关
+- [ ] dashbord首页
 - [ ] 可视化图表
 
 ## 开发及构建

src/components/dashboard/sales.js

@@ -24,7 +24,12 @@ function Sales(props) {
        <XAxis dataKey="name" axisLine={{stroke:color.borderBase,strokeWidth:1}}  tickLine={false}/>
        <YAxis axisLine={false} tickLine={false} />
        <CartesianGrid vertical={false} stroke={color.borderBase} strokeWidth={1} />
-       <Tooltip/>
+       <Tooltip
+         wrapperStyle={{border:'none',boxShadow:'4px 4px 40px rgba(0, 0, 0, 0.05)'}}
+         content={content => {
+         const list = content.payload.map((item,key) => <li key={key} className={styles.tipitem}><span className={styles.radiusdot} style={{background:item.color}}></span>{item.name+':'+item.value}</li>)
+         return <div className={styles.tooltip}><p className={styles.tiptitle}>{content.label}</p><ul>{list}</ul></div>
+       }}/>
        <Line type="monotone" dataKey="Food" stroke={color.purple} strokeWidth={3} dot={{fill:color.purple}} activeDot={{r: 5,strokeWidth:0}}/>
        <Line type="monotone" dataKey="Clothes" stroke={color.red} strokeWidth={3} dot={{fill:color.red}}  activeDot={{r: 5,strokeWidth:0}}/>
        <Line type="monotone" dataKey="Electronics" stroke={color.green} strokeWidth={3}  dot={{fill:color.green}}  activeDot={{r: 5,strokeWidth:0}}/>

src/components/dashboard/sales.less

@@ -5,3 +5,24 @@
     font-size: 16px;
   }
 }
+.tooltip{
+  background: #fff;
+  padding: 20px;
+  font-size: 14px;
+  .tiptitle{
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 8px;
+  }
+  .tipitem{
+    height: 32px;
+    line-height: 32px;
+  }
+  .radiusdot{
+    width:12px;
+    height:12px;
+    margin-right: 8px;
+    border-radius:50%;
+    display:inline-block;
+  }
+}