From 798433665f18b24a47b3dcae7d6956bdb53a4106 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Mon, 20 Nov 2017 18:26:31 +0800
Subject: [PATCH] index  echarts

---
 css/libCss/common.css |   5 +++++
 image/symbol.png      | Bin 0 -> 780 bytes
 index.html            |   2 ++
 js/index.js           | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 113 insertions(+), 0 deletions(-)
 create mode 100644 image/symbol.png

diff --git a/css/libCss/common.css b/css/libCss/common.css
index bc5fb1a..0ff8d8f 100644
--- a/css/libCss/common.css
+++ b/css/libCss/common.css
@@ -218,6 +218,11 @@ section{
     font-size: 52px;
     padding-top: 50px;
 }
+.echart-main{
+    width: 734px;
+    height:258px ;
+    padding: 24px 0  24px 24px ;
+}
 .link-con-right{
     width: 336px;
     height: 581px;
diff --git a/image/symbol.png b/image/symbol.png
new file mode 100644
index 0000000..50c60b8
Binary files /dev/null and b/image/symbol.png differ
diff --git a/index.html b/index.html
index 57e4783..a57ef10 100644
--- a/index.html
+++ b/index.html
@@ -76,6 +76,7 @@
                             <div class="link-con-title">
                                 <span>接入接口统计</span>
                             </div>
+                            <div class="echart-main" id="echart-main"></div>
                         </div>
                     </div>
                     <div class="link-con-right float-left boder-raduis5">
@@ -96,6 +97,7 @@
 
 <script type="text/javascript" src="js/libJs/jquery.min.js"></script>
 <script type="text/javascript" src="js/libJs/bootstrap.min.js"></script>
+<script src="https://cdn.bootcss.com/echarts/3.6.1/echarts.min.js"></script>
 <script type="text/javascript">
     document.write("<s" + "cript type='text/javascript' src='js/index.js?ver" + Math.random() + "'></s" + "cript>");
 </script>
diff --git a/js/index.js b/js/index.js
index e69de29..5bed8c8 100644
--- a/js/index.js
+++ b/js/index.js
@@ -0,0 +1,106 @@
+var fun = {
+    init:function () {
+        var myChart = echarts.init(document.getElementById('echart-main'));
+
+        // 指定图表的配置项和数据
+        var option = {
+            tooltip : {
+                trigger: 'axis',
+                formatter:'{a}: <br />{b}: {c}',
+                axisPointer: {
+                    type: 'line',
+                    label: {
+                        backgroundColor: '#6a7985'
+                    },
+                    lineStyle:{
+                        color:'#2abb9b'
+                    }
+                },
+
+            },
+            grid: {
+                left: '0',
+                right: '3%',
+                bottom: '0',
+                top:'3%',
+                containLabel: true
+            },
+            xAxis : [
+                {
+                    boundaryGap: false,
+                    type : 'category',
+                    boundaryGap : false,
+                    data : ['周一','周二','周三','周四','周五','周六','周日'],
+                    axisTick:{
+                        show:false,
+                    },
+                    axisLine:{
+                        lineStyle:{
+                            color:'#e5e5e5',
+                        }
+                    },
+                    splitLine:{
+                        show:false,
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#333'
+                        }
+                    }
+                }
+            ],
+            yAxis : [
+                {
+                    boundaryGap: false,
+                    type : 'value',
+                    axisTick:{
+                        show:false,
+                    },
+                    axisLine:{
+                        lineStyle:{
+                            color:'#e5e5e5',
+                        }
+                    },
+                    splitLine:{
+                      show:false,
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#333'
+                        }
+                    }
+                }
+            ],
+            series : [
+                {
+                    smooth:true,
+                    name:'接入接口统计',
+                    // symbol:'image://./../image/symbol.png',
+                    symbol:'image://image/symbol.png',
+                    symbolOffset:[0,5],
+                    symbolSize:26,
+                    type:'line',
+                    stack: '总量',
+                    areaStyle: {normal: {
+                        color:'rgba(38,190,150,.1)'
+                    }},
+                    lineStyle:{
+                        normal: {
+                            color:'#2abb9b',
+                            width:3,
+                        }
+                    },
+                    data:[120, 132, 101, 134, 90, 230, 210]
+                },
+
+            ]
+        };
+
+
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+    },
+};
+fun.init();
\ No newline at end of file
--
libgit2 0.21.4