标签:min int auto push 地图绘制 地图 current 页面 param
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)混用的实现方法
标签:min int auto push 地图绘制 地图 current 页面 param
原文地址:http://www.cnblogs.com/hunterCecil/p/7522466.html