Echart timeline 高級用法！！！！

1、前言

　　在使用 echart timeline 來着圖形可視化時，我使用的和官網也不同，由於我有使用映射關係。好比我將 no 映射到X軸，將 d4 映射到Y軸。

2、參考

　　echart官網：https://www.echartsjs.com/examples/zh/editor.html?c=mix-timeline-finance

3、實現

　　重點部分我已經在代碼中標註，您能夠複製代碼到echart實例中查看。有不懂咱們在溝通，相互學習。

option = {
    baseOption: {
        timeline: {
            axisType: 'category',
            show: true,
            autoPlay: true,
            playInterval: 1000,
            data: ["2019年01月02日", "2019年01月03日", "2019年01月04日", "2019年01月05日"]
        },
        grid: {
            containLabel: true
        },
        "xAxis": [{
            "dataIndex": "No",
            "map": "No",
            "name": "測點",
            "type": "category",
            "showSplitLine": false,
            "showSplitArea": false,
            "axisTick": {
                "alignWithLabel": true
            },
            "splitLine": {
                "show": false
            },
            "splitArea": {
                "show": false
            },
            "axisLine": {
                "onZero": false
            },
            "axisLabel": {}
        }],
        "yAxis": [{
            "showSplitLine": true,
            "name": "溫度",
            "type": "value",
            "position": "left",
            "offset": 0,
            "measure": "",
            "showSplitArea": false,
            "splitNumber": "5",
            "splitNumbers": "10",
            "splitLine": {
                "show": true
            },
            "splitArea": {
                "show": false
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#c23531"
                }
            },
            "axisLabel": {
                "formatter": "{value} "
            }
        }],
        "legend": {
            "type": "scroll",
            "orient": "horizontal",
            "left": 50,
            "right": 50,
            "y": 30,
            "data": [{
                "name": "溫度"
            }],
            "icon": "roundRect"
        },
        series: [{
            "name": "溫度",
            "no": "",
            "type": "line",
            "yAxisIndex": 0,
            "xAxisIndex": 0,
            "color": "#c23531",
            "lineStyle": {
                "width": 2
            },
            "dimensions": ["no", "d4"], "encode": { "x": "no", "y": "d4" }, "instrumentNo": "",
            "x": 0,
            "y": 0,
            "typeShow": "線狀圖",
            "dataIndex": "溫度",
            "map": "d4",
            "xValue": "no",
            "yValue": "d4",
            "showMax": false,
            "showMin": false,
            "showAvg": false,
            "showArea": false,
            "smooth": true,
            "connectNulls": true,
            "width": 2,
            "xShow": "測點",
            "yShow": "溫度"
        },
        ],
        tooltip: {}
    },
    //變量則寫在options中
    options: [{ "title": { "text": "2019年01月02日分佈圖" }, "dataset": { "source": [{ "d4": 12.762600000000008, "no": "ASX1", "measureTime": "2019-01-02T00:00:00+08:00" }, { "d4": 13.355999999999986, "no": "ASX3", "measureTime": "2019-01-02T00:00:00+08:00" }, { "d4": 13.689899999999954, "no": "ASX2", "measureTime": "2019-01-02T00:00:00+08:00" }, { "d4": 13.40370000000001, "no": "ASX4", "measureTime": "2019-01-02T00:00:00+08:00" }] } },
    {
        "title": {
            "text": "2019年01月03日分佈圖"
        },
        "dataset": {
            "source": [{
                "d4": 13.30829999999996,
                "no": "ASX4",
                "measureTime": "2019-01-03T00:00:00+08:00"
            },
            {
                "d4": 13.689899999999954,
                "no": "ASX2",
                "measureTime": "2019-01-03T00:00:00+08:00"
            },
            {
                "d4": 13.260600000000004,
                "no": "ASX3",
                "measureTime": "2019-01-03T00:00:00+08:00"
            },
            {
                "d4": 12.762600000000008,
                "no": "ASX1",
                "measureTime": "2019-01-03T00:00:00+08:00"
            }]
        }
    },
    {
        "title": {
            "text": "2019年01月04日分佈圖"
        },
        "dataset": {
            "source": [{
                "d4": 12.667000000000028,
                "no": "ASX1",
                "measureTime": "2019-01-04T00:00:00+08:00"
            },
            {
                "d4": 13.260600000000004,
                "no": "ASX3",
                "measureTime": "2019-01-04T00:00:00+08:00"
            },
            {
                "d4": 13.594499999999972, "no": "ASX2", "measureTime": "2019-01-04T00:00:00+08:00"
            },
            {
                "d4": 13.30829999999996,
                "no": "ASX4",
                "measureTime": "2019-01-04T00:00:00+08:00"
            }]
        }
    },
    {
        "title": {
            "text": "2019年01月05日分佈圖"
        },
        "dataset": {
            "source": [{
                "d4": 13.21289999999998,
                "no": "ASX4",
                "measureTime": "2019-01-05T00:00:00+08:00"
            },
            {
                "d4": 12.667000000000028,
                "no": "ASX1",
                "measureTime": "2019-01-05T00:00:00+08:00"
            },
            {
                "d4": 13.594499999999972,
                "no": "ASX2",
                "measureTime": "2019-01-05T00:00:00+08:00"
            },
            {
                "d4": 13.165200000000024,
                "no": "ASX3",
                "measureTime": "2019-01-05T00:00:00+08:00"
            }]
        }
    }]
}

 到此爲止！