echart 資料顯示樣式

option = {

    tooltip : {

        trigger: 'axis'

    },

    legend: {

        data:['最高','最低']

    },

    toolbox: {

        show : true,

        orient: 'horizontal',      // 布局方式，預設為水準布局，可選為：

                                   // 'horizontal' ¦ 'vertical'

        x: 'right',                // 水準安放位置，預設為全圖右對齊，可選為：

                                   // 'center' ¦ 'left' ¦ 'right'

                                   // ¦ {number}（x坐标，機關px）

        y: 'top',                  // 垂直安放位置，預設為全圖頂端，可選為：

                                   // 'top' ¦ 'bottom' ¦ 'center'

                                   // ¦ {number}（y坐标，機關px）

        color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],

        backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景顔色

        borderColor: '#ccc',       // 工具箱邊框顔色

        borderWidth: 0,            // 工具箱邊框線寬，機關px，預設為0（無邊框）

        padding: 5,                // 工具箱内邊距，機關px，預設各方向内邊距為5，

        showTitle: true,

        feature : {

            mark : {

                show : true,

                title : {

                    mark : '輔助線-開關',

                    markUndo : '輔助線-删除',

                    markClear : '輔助線-清空'

                },

                lineStyle : {

                    width : 1,

                    color : '#1e90ff',

                    type : 'dashed'

                }

            },

            dataZoom : {

                show : true,

                title : {

                    dataZoom : '區域縮放',

                    dataZoomReset : '區域縮放-後退'

                }

            },

            dataView : {

                show : true,

                title : '資料視圖',

                readOnly: false,

                lang : ['資料視圖', '關閉', '重新整理'],

                optionToContent: function(opt) {

                    var axisData = opt.xAxis[0].data;

                    var series = opt.series;

                    var table = '<table style="width:100%;text-align:center"><tbody><tr>'

                                 + '<td>時間</td>'

                                 + '<td>' + series[0].name + '</td>'

                                 + '<td>' + series[1].name + '</td>'

                                 + '</tr>';

                    for (var i = 0, l = axisData.length; i < l; i++) {

                        table += '<tr>'

                                 + '<td>' + axisData[i] + '</td>'

                                 + '<td>' + series[0].data[i] + '</td>'

                                 + '<td>' + series[1].data[i] + '</td>'

                                 + '</tr>';

                    }

                    table += '</tbody></table>';

                    return table;

                }

            },

            magicType: {

                show : true,

                title : {

                    line : '動态類型切換-折線圖',

                    bar : '動态類型切換-柱形圖',

                    stack : '動态類型切換-堆積',

                    tiled : '動态類型切換-平鋪'

                },

                type : ['line', 'bar', 'stack', 'tiled']

            },

            restore : {

                show : true,

                title : '還原',

                color : 'black'

            },

            saveAsImage : {

                show : true,

                title : '儲存為圖檔',

                type : 'jpeg',

                lang : ['點選本地儲存'] 

            },

            myTool : {

                show : true,

                title : '自定義擴充方法',

                icon : 'image://../asset/ico/favicon.png',

                onclick : function (){

                    alert('myToolHandler')

                }

            }

        }

    },

    calculable : true,

    dataZoom : {

        show : true,

        realtime : true,

        start : 20,

        end : 80

    },

    xAxis : [

        {

            type : 'category',

            boundaryGap : false,

            data : function (){

                var list = [];

                for (var i = 1; i <= 30; i++) {

                    list.push('2013-03-' + i);

                }

                return list;

            }()

        }

    ],

    yAxis : [

        {

            type : 'value'

        }

    ],

    series : [

        {

            name:'最高',

            type:'line',

            data:function (){

                var list = [];

                for (var i = 1; i <= 30; i++) {

                    list.push(Math.round(Math.random()* 30));

                }

                return list;

            }()

        },

        {

            name:'最低',

            type:'line',

            data:function (){

                var list = [];

                for (var i = 1; i <= 30; i++) {

                    list.push(Math.round(Math.random()* 10));

                }

                return list;

            }()

        }

    ]

};