折線用於反應事物發展趨勢和分佈狀況

var option = {
            title: { //設定標題
                text: '主標題',
                subtext: '副標題',
                textStyle: {//設定主標題樣式
                    color: '#fff',//設定字型顏色
                    fontStyle: 'normal',//設定文字字型'normal'、'italic'、'oblique'
                    fontWeight: 
 
'bolder',//設定字型粗細'normal'、'bold'、'bolder'、'lighter'
                },
                itemGap:10,//設定主副標題間距
                borderWidth:2,//設定邊框線框
                borderColor:'#ccc',//設定邊的顏色
                borderRadius: 5, // 標題邊框圓角
                backgroundColor:'yellow',//設定背景顏色
            },
            legend: {
 
//設定圖例
                type:'',//scroll設定為滾動圖例，預設為plain
                orient: 'horizontal',//圖例對齊方式為水平對齊，垂直對其：'vertical'
                data: []
            },
            tooltip: {//提示框元件
                trigger: '',//設定提示框觸發方式。'item',資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。'axis',座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
                formatter: 
 
"{a}<br/>{b}:{c}"//提示框顯示內容
            },
            toolbox: {//工具箱
                feature: {
                    saveAsImage: {},//儲存圖片
                    restore: {},//配置還原
                    dataView: {},//資料檢視
                    dataZoom: {},//區域縮放
                    magicType: {//資料型別切換
                        type: ['line', 'bar', 'stack']
                    }

                }
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat','Sun'],
                boundaryGap:{show:'ture'},//是否緊挨邊緣
            },
            yAxis: {
                type: 'value',
                scale:'ture'//縮放：脫離0值比例，以最小的數值作為最低值
            },
            series: [
                {
                    //step:'end',//設定折線的樣式，繪製階梯圖
                    data: [70, 250, 120, 218, 135, 147, 260],
                    type: 'line',
                    smooth: 'ture',   //線條設為平滑的
                    label:{show:'true'},//顯示線條對應點的數值
                    stack:'總量',//用於設定堆積效果，當有兩個折線圖時兩個圖形都設定stack並且數值一樣
                    lineStyle: {      //設定線條樣式
                        color: 'blue',//線條顏色
                        width:2,      //線條寬度
                    },
                    areaStyle:{  //填充線條下方區域的顏色
                        color:'yellow'
                    },
                    markLine: {       //設定標記線
                        data: [
                            {
                                type: 'average', name: '平均值',
                                itemStyle: {       //設定標記線樣式
                                    normal: { borderType: 'dotted', color: 'darkred' }//
                                }
                            }
                        ]
                    },
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }
                        ]
                    },
                    markArea: {    //標記區域形成柱狀區間
                        data: [
                            [
                                {    //開始位置
                                    xAxis: 'Mon'
                                },
                                {    //結束位置
                                    xAxis: 'Tue',
                                }
                            ],
                            [
                                {   //開始位置
                                    xAxis: 'Fri',
                                }, 
                                {   //結束位置
                                    xAxis: 'Sun'
                                }
                            ]
                        ]
                    },

                }
            ]
        };