1、簡述
　　echarts中的 timeline 組件，提供了在多個 ECharts option 間進行切換、播放等操作的功能。
　　與其他組件些不同，它需要操作『多個option』。 所以除了基準的baseOption外，我們還需要設置一個原子option和多個原子option的復合option。

2. baseOption實現方式如下（以石家莊市地圖為例）：

var mapDataByAreaTest = [ //各區域初始值
        {name: ‘長安區‘, value: 12},
        {name: ‘辛集市‘, value: 0},
        {name: ‘無極縣‘, value: 0},
        {name: ‘趙縣‘,   value: 0},
        {name: ‘平山縣‘, value: 0},
        {name: ‘元氏縣‘, value: 0},
        {name: ‘靈壽縣‘, value: 0},
        {name: ‘贊皇縣‘, value: 0},
        {name: ‘深澤縣‘, value: 0},
        {name: ‘高邑縣‘, value: 0},
        {name: ‘新華區‘, value: 34},
        {name: ‘井陘縣‘, value: 0},
        {name: ‘行唐縣‘, value: 0},
        {name: ‘正定縣‘, value: 31},
        {name: ‘橋西區‘, value: 5},
        {name: ‘欒城區‘, value: 21},
        {name: ‘鹿泉區‘, value: 25},
        {name: ‘槁城區‘, value: 30},
        {name: ‘裕華區‘, value: 7},
        {name: ‘井陘礦區‘, value: 45},
        {name: ‘晉州市‘, value: 0},
        {name: ‘新樂市‘, value: 0}
];
var timeByMonth = [‘1月‘,‘2月‘,‘3月‘,‘4月‘,‘5月‘,‘6月‘,‘7月‘,‘8月‘,‘9月‘,‘10月‘,‘11月‘,‘12月‘];//timeline初始值
var baseOption = {
	timeline: {
        show: true,
        axisType: ‘category‘,
        autoPlay: true,
        currentIndex: 5,
        playInterval: 5000,
        symbolSize: 12,
        checkpointStyle: {
            symbol: ‘circle‘,
            symbolSize: 18,
            color: ‘#00d3e7‘,
            borderWidth: 2,
            borderColor: "#00d3e7"
        },
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: ‘14‘,
                    color:‘#fff‘
                }
            },
            emphasis:{
                textStyle: {
                    fontSize: ‘18‘,
                    color:‘#00d3e7‘
                }
            }
        },
        data: timeByMonth
	},
	visualMap: {
        min: 0,
        max: 50,
        left: ‘16%‘,
        top: ‘68%‘,
        text: [‘高‘,‘低‘],
        calculable: true,
        itemWidth: 30,
        inRange: {
            color: [‘#56c5d0‘,‘#eac736‘,‘#d94e5d‘]
        },
        textStyle: {
            fontSize: ‘16‘,
            color:‘#fff‘
        }
	},
	series: [{
        name: ‘‘,
        type: ‘map‘,
        mapType: ‘sjz‘,
        itemStyle:{
            normal:{label:{show:true}},
            emphasis:{label:{show:true}}
        },
        roam: false,
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: ‘14‘,
                    color:‘#fff‘
                }
            },
            emphasis: {
                show: true
            }
        },
        data:mapDataByAreaTest
    }]
};　

3. options實現方式如下：

varar options = [];
var mapOption = {};
for(var i=0;i<timeByMonth.length;i++){
    options.push({
        series: baseOption.series//此處可以根據實際情況循環放置每個option的series對應的data值
    });
}
mapOption.baseOption = baseOption;
mapOption.options = options;    

4. 頁面地圖繪制：

$.get(‘/data/sjz_map.json‘, function (data) {
    echarts.registerMap(‘sjz‘, data);
    var myChart = echarts.init(document.getElementById(‘sjz_map‘));
    myChart.setOption(mapOption);

    myChart.on("timelinechanged", function(param){
    / /TODO DO SOMETING ELSE HERE
        myChart.setOption(mapOption);
    });
});

5. 實際效果圖如下：

echarts中視覺映射器（visualMap）與時間軸（timeline）混用的實現方法