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

最新推荐文章于 2024-08-30 15:57:30 发布

weixin_30426957

最新推荐文章于 2024-08-30 15:57:30 发布

阅读量681

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hunterCecil/p/7522466.html

本文介绍如何使用ECharts中的timeline组件实现数据随时间变化的展示效果。通过具体实例，包括设置基线选项、循环创建多个选项及页面地图的绘制过程，帮助读者掌握timeline的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/hunterCecil/p/7522466.html