echarts中视觉映射器（visualMap）与时间轴（timeline）混用的实现方法

Posted 2020-10-07 hunter_Cecil

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);
    });
});