echarts 实现点击时间轴，显示切换功能

echarts时间轴的样例中，是有点击时间轴，然后直接切换的功能的，但是用它的sample的时候，并没有这一块的功能，然后看网上的教材也都不怎么理想，后来看官方文档，找到的解决方法

1.在timeline中增加事件监听

timeline: {
    data: dataTime,
    triggerEvent: true,
    label: {
        formatter: function (s) {
            return formatDate(s, 'yyyy-MM');
        }
    },
    currentIndex: month,
    autoPlay: false
},

2.增加事件绑定

var myChart1 = echarts.init(document.getElementById("chart-box"));
myChart1.setOption(option);
myChart1.on("click", function (params) {
    if(params.componentType === 'timeline'){
        var month = new Date(params.dataIndex).getMonth();
        var myChart1 = echarts.init(document.getElementById("chart-box"));
        var option = {
            timeline: {
                data: dataTime,
                triggerEvent: true,
                label: {
                    formatter: function (s) {
                        return formatDate(s, 'yyyy-MM');
                    }
                },
                currentIndex: month,
                autoPlay: false
            },
            options: []
        };

        setDetail(chartData, option, month + 1);
        myChart1.setOption(option);
        myChart1.resize();
    }
});

3.设置样式，需要注意的几个地方就是timeline的currentIndex属性,用户指定当前显示使用的是哪个options[i]

另外一个需要注意的是options里面保存的显示的数据，但是我们需要为当前显示的那个数据设置样式，其余的只需要设置数据就行，因此我单独写了一个方法，用来拼接options的内容

/**
 * 动态设置图表的数据
 * @param chartData
 * @param option
 */
function setDetail(chartData, option, index) {
    var date = new Date();
    var options = [];
    var month = date.getMonth() + 1;
    for (var i = 1; i <= month; i++) {
        if (index === i) {
            //设置具体的样式
            var detail = {
                title: {
                    textStyle: {
                        color: '#a8a8a8',
                        fontSize: 13
                    },
                    text: i + '月工单分布'
                },
                tooltip: {'trigger': 'axis'},
                legend: {
                    x: 'right',
                    data: ['工单数', '同比', '环比'],
                    textStyle: {
                        color: '#a8a8a8',
                        fontSize: 13
                    },
                    triggerEvent: true,
                    selected: {
                        '工单数': true,
                        '同比': false,
                        '环比': false
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#C1232B', '#B5C334', '#FCCE10'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    feature: {
                        'magicType': {'show': true, 'type': ['line', 'bar', 'stack', 'tiled']}
                    }
                },
                calculable: true,
                grid: {'y': 80, 'y2': 100},
                xAxis: [{
                    type: 'category',
                    data: chartData.get(i).major,
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#a8a8a8'
                        }
                    }
                }],
                yAxis: [
                    {
                        type: 'value',
                        name: '工单数（条）',
                        axisLabel: {
                            textStyle: {
                                color: '#a8a8a8'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '百分比（%）',
                        axisLabel: {
                            textStyle: {
                                color: '#a8a8a8',
                                fontSize: 10,
                                fontStyle: "bold"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '工单数',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#C1232B'
                            }
                        },
                        barWidth: 30,
                        markLine: {
                            symbol: ['arrow', 'none'],
                            symbolSize: [4, 2],
                            itemStyle: {
                                normal: {
                                    lineStyle: {color: 'orange'},
                                    barBorderColor: 'orange',
                                    label: {
                                        position: 'left',
                                        formatter: function (params) {
                                            return Math.round(params.value);
                                        },
                                        textStyle: {color: 'orange'}
                                    }
                                }
                            },
                            data: [{'type': 'average', 'name': '平均值'}]
                        },
                        data: chartData.get(i).total
                    },
                    {
                        name: '环比', 'yAxisIndex': 1, 'type': 'bar',
                        data: chartData.get(i).line,
                        itemStyle: {
                            normal: {
                                color: '#B5C334'
                            }
                        },
                        barWidth: 30
                    },
                    {
                        name: '同比', 'yAxisIndex': 1, 'type': 'bar',
                        data: chartData.get(i).yoy,
                        itemStyle: {
                            normal: {
                                color: '#FCCE10'
                            }
                        },
                        barWidth: 30
                    }
                ]
            };
            options.push(detail);
        } else {
            //添加数据
            var detail = {
                title: {text: i + '月工单分布'},
                series: [
                    {data: chartData.get(i).total},
                    {data: chartData.get(i).line},
                    {data: chartData.get(i).yoy}
                ]
            };
            options.push(detail);
        }
    }
    option.options = options;
}

最后再调用

myChart1.setOption(option);
myChart1.resize();
就可以正常工作了