// 例項化eChart圖表
function initEchart( idName, option ) {
    var myEchart = echarts.init( document.getElementById( idName ) );

    myEchart.setOption( option );
}

// 隨機數生成
function randomNum( digitNumber, holdNumber ) {
    var random = Math.random();
    random = Math.pow( 10, digitNumber ) * random;
    random = random.toFixed(holdNumber);

    return random;
}
 

var option = {
        title: {
            text: "2018年廣州市空氣首要汙染物天數佔比",
            subtext: "",
            x: '16', textStyle: {fontWeight: 'normal'}
        },
        toolbox: {
            orient: 'horizontal',
            feature: {
                magicType: {
                    type: ['line', 'bar']
                },
                restore: {show: true},
                saveAsImage: {show: true}
            },
            bottom: 15,
            right: 20
        },
        grid: {     // 上下左右邊距
            top: "20%",
            bottom: "10%",
            left: "8%",
            right: "8%",
            containLabel: true
        },
        tooltip: {
            padding: 10,
            backgroundColor: '#222',
            borderColor: '#777',
            borderWidth: 1,
            formatter: function (obj) {
                var value = obj.value;
                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                        + obj.seriesName + ' ' + value[0] + '日：'
                        + value[2]
                        + '</div>'
                        + value[1] + '<br>';
            }
        },
        xAxis: {
            type: 'value',
            name: '時間',
            nameTextStyle: {
                color: '#6d9269',
                fontSize: 14
            },
            nameGap: 16,
            max: 23,
            splitLine: {        // 豎線
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '單位：噸',
            nameLocation: 'end',
            nameGap: 20,
            nameTextStyle: {
                color: '#6d9269',
                fontSize: 16
            },
            axisTick: {         // 軸的刻度
                show: false
            },
            axisLine: {         // 軸線
                show: false
            }
        },
        series: [
            {
                name: '北京',
                type: 'scatter',
                itemStyle: {
                    normal: {
                        color: '#6d9269',      //散點的顏色
                    }
                },
                data: [
                    [1, randomNum(4, 0), "優"],
                    [2, randomNum(4, 0), "優"],
                    [3, randomNum(4, 0), "優"],
                    [4, randomNum(4, 0), "優"],
                    [5, randomNum(4, 0), "優"],
                    [6, randomNum(4, 0), "優"],
                    [7, randomNum(4, 0), "優"],
                    [8, randomNum(4, 0), "優"],
                    [9, randomNum(4, 0), "優"],
                    [10, randomNum(4, 0), "優"],
                    [11, randomNum(4, 0), "優"],
                    [12, randomNum(4, 0), "優"],
                    [13, randomNum(4, 0), "優"],
                    [14, randomNum(4, 0), "優"],
                    [15, randomNum(4, 0), "優"],
                    [16, randomNum(4, 0), "優"],
                    [17, randomNum(4, 0), "優"],
                    [18, randomNum(4, 0), "優"],
                    [19, randomNum(4, 0), "優"],
                    [20, randomNum(4, 0), "優"],
                    [21, randomNum(4, 0), "優"],
                    [22, randomNum(4, 0), "優"],
                    [23, randomNum(4, 0), "優"]
                ]
            }
        ]
    }

var echartId = 'lineChart-01';
initEchart(echartId, option);