Echart timeline 高级用法！！！！

一、前言

　　在使用 echart timeline 来着图形可视化时，我使用的和官网也不一样，因为我有使用映射关系。比如我将 no 映射到X轴，将 d4 映射到Y轴。

二、参考

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

三、实现

　　重点部分我已经在代码中标注，您可以复制代码到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"
            }]
        }
    }]
}

 到此为止！