利用Echarts實現折線圖

jopen 10年前發布 | 297K 次閱讀 圖表/報表制作 ECharts 

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>ECharts-基本線性圖及其配置要求</title>

        <script src="js/esl.js" type="text/javascript"></script>

    </head>

    <body>

        <div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;">

        </div>

        <script type="text/javascript" language="javascript">

            // 按需加載

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

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

            require.config({

                paths: {

                    echarts: './js/echarts' //echarts.js的路徑

                }

            });

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

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

            require(

            [

                'echarts',

                'echarts/chart/line'

            ],

            //回調函數

            DrawEChart

            );



        //渲染ECharts圖表  
        function DrawEChart(ec) {  
            //圖表渲染的容器對象  
            var chartContainer = document.getElementById("main");  
            //加載圖表  
            var myChart = ec.init(chartContainer);  
            myChart.setOption({  
                //圖表標題  
                title: {  
                    text: "ECharts簡單線形圖表及其配置展示實例", //正標題  
                    link: "http://www.xxx.com", //正標題鏈接 點擊可在新窗口中打開  
                    x: "center", //標題水平方向位置  
                    subtext: "From:http://www.xxx.com", //副標題  
                    sublink: "http://www.xxx.com", //副標題鏈接  
                    //正標題樣式  
                    textStyle: {  
                        fontSize:24  
                    },  
                    //副標題樣式  
                    subtextStyle: {  
                        fontSize:12,  
                        color:"red"  
                    }  
            },  
            //數據提示框配置  
            tooltip: {  
                trigger: 'axis' //觸發類型，默認數據觸發，見下圖，可選為：'item' | 'axis' 其實就是是否共享提示框  
            },  
            //圖例配置  
            legend: {  
                data: ['蒸發量', '降水量'], //這里需要與series內的每一組數據的name值保持一致  
                y:"bottom"  
            },  
            //工具箱配置  
             toolbox: {  
                show : true,  
                feature : {  
                    mark : {show: true}, // 輔助線標志，上圖icon左數1/2/3，分別是啟用，刪除上一條，刪除全部  
                    dataView : {show: true, readOnly: false},// 數據視圖，上圖icon左數8，打開數據視圖  
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},// 圖表類型切換，當前僅支持直角系下的折線圖、柱狀圖轉換，上圖icon左數6/7，分別是切換折線圖，切換柱形圖  
                    restore : {show: true}, // 還原，復位原始圖表，上圖icon左數9，還原  
                    saveAsImage : {show: true} // 保存為圖片，上圖icon左數10，保存  
                }  
            },  
            calculable: true,  
            //軸配置  
            xAxis: [  
                    {  
                        type: 'category',  
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],  
                        name: "月份"  
                    }  
                ],  
            //Y軸配置  
            yAxis: [  
                    {  
                        type: 'value',  
                        splitArea: { show: true },  
                        name:"數值"  
                    }  
                ],  
            //圖表Series數據序列配置  
            series: [  
                    {  
                        name: '蒸發量',  
                        type: 'line',  
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]  
                    },  
                    {  
                        name: '降水量',  
                        type: 'line',  
                        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>  </pre><img src="https://simg.open-open.com/show/0b6320d7b33eba813b82945919de05fa.png" title="20141028172653594.png" alt="20141028172653594.png" border="0" height="183" width="719" /><br />
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！