歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

EChart 關於圖標控件的簡單實用

1.下載前段框架並放入項目中去.

2.在js中調用


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>ECharts</title>

</head>

 

<body>

    <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->

    <!--Step:1 為ECharts准備一個具備大小(寬高)的Dom-->

    <div id="main"

        ></div>

    <div id="mainMap"

        ></div>

 

    <!--Step:2 Import echarts.js-->

    <!--Step:2 引入echarts.js-->

    <script src="${base.contextPath}/js/echarts.js"></script>

    <script type="text/javascript"

        src="${base.contextPath}/js/jquery-1.6.2.min.js"></script>

    <script type="text/javascript">

        // Step:3 conifg ECharts's path, link to echarts.js from current page.

        // Step:3 為模塊加載器配置echarts的路徑,從當前頁面鏈接到echarts.js,定義所需圖表路徑

        require.config({

            paths : {

                echarts : '${base.contextPath}/js'

            }

        });

 

        // Step:4 require echarts and use it in the callback.

        // Step:4 動態加載echarts然後在回調函數中開始使用,注意保持按需加載結構定義圖表路徑

        $(document).ready(

                function() {

                    $.ajax({

                        url : "${base.contextPath}/total/data?type=1",

                        type : 'get',

                        contentType : "application/json",

                        cache : false,

                        success : function(text) {

                            var data = text;

 

                            bar(data);

                        },

                        error : function(jqXHR, textStatus, errorThrown) {

                            btnSave.setEnabled(true);

                            if (400 == jqXHR.status || 403 == jqXHR.status

                                    || 500 == jqXHR.status)

                                return;

                            var text = "操作失敗," + jqXHR.responseText;

                            mini.alert(text);

                        }

                    });

                });

        // bar(null);

        function bar(data) {

            var sData = new Array();

            var sX = new Array();

            for (i = 0; i < data.length; i++) {

                sData[i] = data[i].total;

                sX[i] = data[i].brand;

            }

            require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',

            //'echarts/chart/map'

            ], function(ec) {

 

                //--- 折柱 ---

                var myChart = ec.init(document.getElementById('main'));

                myChart.setOption({

                    tooltip : {

                        trigger : 'axis'

                    },

                    legend : {

                        data : [ '總數' ]

                    },

                    toolbox : {

                        show : true,

                        feature : {

                            mark : {

                                show : true

                            },

                            dataView : {

                                show : true,

                                readOnly : false

                            },

                            magicType : {

                                show : true,

                                type : [ 'line', 'bar' ]

                            },

                            restore : {

                                show : true

                            },

                            saveAsImage : {

                                show : true

                            }

                        }

                    },

                    calculable : true,

                    xAxis : [ {

                        type : 'category',

                        data : sX

                    } ],

                    yAxis : [ {

                        type : 'value',

                        splitArea : {

                            show : true

                        }

                    } ],

                    series : [ {

                        name : '總數',

                        type : 'bar',

                        data : sData

                    },

                    /*  {

                        name:'降水量',

                        type:'bar',

                        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]

                    } */

                    ]

                });

            });

        }

    </script>

</body>

</html>

Copyright © Linux教程網 All Rights Reserved