Echarts數據可視化之Line

原創

2020-02-22 18:11

示例來自於Echarts官網：https://www.echartsjs.com/examples/zh/index.html

解析折線圖配值內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折線圖</title>
    <script src="echarts.min.js"></script>
</head
<body>
<div id="main" style="width=900px;height:600px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        title:{
            text:'未來一週氣溫變化',    //大標題
            subtext:'虛構'    //小標題
        },
        tooltip:{   //提示框組件
            trigger:'axis'  // 'axis'座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
        },
        legend:{    //顯示圖例
            show:true,  //是否顯示
            data:['最高氣溫','最低氣溫']
        },
        toolbox:{   //顯示工具箱組件
            show:true,  //是否顯示
            feature:{
                dataZoom:{  //數據區域縮放
                yAxisIndex:'none'},
                dataView:{  //數據視圖工具，展示當前圖表數據
                readOnly:false},    //是否不可編輯（只讀）
                magicType:{ //動態類型切換
                type:['line','bar']},   //可在line，bar之間切換顯示
                restore:{   //配置項還原
                    show:true,
                    title:'還原'
                },
                saveAsImage:{}  //保存圖片
            }
        },
        xAxis:{     //x軸
            type:'category',    //座標軸類型。'value' 數值軸，適用於連續數據。'category' 類目軸，適用於離散的類目數據，爲該類型時必須通過 data 設置類目數據
            boundaryGap:false,  //類目軸中 boundaryGap 可以配置爲 true 和 false。非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的數組，分別表示數據最小值和最大值的延伸範圍，可以直接設置數值或者相對的百分比，在設置 min 和 max 後無效['20%', '20%']
            data:['週一','週二','週三','週四','週五','週六','週日']
        },
        yAxis:{
            type:'value',
            axisLabel:{     //座標軸刻度標籤的相關設置
                formatter:'{value}°C'
            }
        },
        series:[
            {
                name:'最高氣溫',
                type:'line',    //折線圖
                data:[11,11,15,13,12,13,10],
                markPoint:{		//標記點
                    data:[
                        {type:'max',name:'最大值'},
                        {type:'min',name:'最小值'}
                    ]
                },
                markLine:{		//標記線（輔助線）
                    data:[
                        {type:'average',name:'平均值'},
                    ]
                }
            },
            {
                name:'最低氣溫',
                type:'line',
                data:[1,-2,2,5,3,2,0],
                markPoint:{		//標記點
                    data:[
                    {name:'周最低',value:-2,xAxis:1,yAxis:-1.5}
                ]
                },
                markLine:{	//標記線（輔助線）
                    data:[
                        {type:'average',name:'平均值'},
                        [{
                            symbol:'none',
                            x:'90%',
                            yAxis:'max'
                        },{
                            symbol:'circle',
                            label:{
                                position:'start',
                                formatter:'最大值'
                            },
                            type:'max',
                            name:'最高點'
                        }]
                    ]
                }
            }

        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>