index echarts

liuqimichale
1 parent de45b5c3
Showing 4 changed files with 113 additions and 0 deletions
css/libCss/common.css
image/symbol.png
index.html
js/index.js
@@ -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;
@@ -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>
+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