Legend单选,自动轮播echarts 柱状配置项内容和展示

本作品基于EC3.2.0,修改部分源代码

配置项如下
      	window.chartCfg.themeName = 'vintage';

	var json = {
		chart0: {
			legend: ['蒸发量','降水量'],
			xAxisData: [
				['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
			],
			data: [
				[1,2,3,4,5,6,7,8,9,10,11,12],
				[12,11,10,9,8,7,6,5,4,3,2,1]
			]
		},
		chart1: {
			axisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			data: [],
			links: []
		},
		chart2: {
			axisData: [['周一', '周二', '周三', '周四', '周五', '周六', '周日']],
			data: [[1,2,3,4,5,6,7],[10,20,13,41,25,36,47]]
		},
		chart3: {
			locations: ['福建', '内蒙古', '上海', '江苏', '山东', '广东', '浙江', '贵州', '广西', '辽宁'],
			companys: [20, 1, 2, 1, 18, 11, 15, 34, 23, 16]
		},
		chart4: {

		}
	};

	app = JSON.parse(JSON.stringify(json));//原对象不能包含function以及过于复杂的层次 Deep Clone
	
	
	app.logoTicket = setInterval(function () {
        drawLogo(myChart);
	}, 3);
	
	
	
	app.chart0.data[0] = zrUtil.map(zrUtil.map(json.chart0.data[0], function(value, index){
		return { index: index, value: value };
	}).sort(function(a, b){
		return b.value - a.value;
	}), function(item, index){
		return {name: json.chart0.xAxisData[0][item.index], value: item.value};
	});
	app.chart0.xAxisData[0] = zrUtil.map(app.chart0.data[0], function(item, index){
		return item.name;
	});
	app.chart0.legendIndex = 0;
	app.timeTicket = setInterval(function () {

		if(app.shownChartIndex === 0){
			var tindex = app.chart0.legendIndex % app.chart0.legend.length;
			
		    myChart.dispatchAction({
				type: 'legendToggleSelect',
				// 图例名称
				name: app.chart0.legend[tindex]
			});
			
			app.chart0.legendIndex++;
		}
	
	}, 5000);
	
	/*Chart 0*/
	
	var opts = [{
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data:app.chart0.legend,
			selectedMode:'single',
			selected:{
				'蒸发量':true,
				'降水量':false
			}
		},
		xAxis: [
			{
				type: 'category',
				data: app.chart0.xAxisData[0]
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '水量',
				min: 0,
				max: 20,
				interval: 5,
				axisLabel: {
					formatter: '{value} ml'
				}
			}
		],
		series: [
			{
				name:'蒸发量',
				type:'bar',
				data:app.chart0.data[0]
			},
			{
				name:'降水量',
				type:'bar',
				data:app.chart0.data[1]
			}
		]
	}];

    charts.push(myChart);

    charts[0].on('legendselectchanged', function(params){
			var tindex = zrUtil.indexOf( app.chart0.legend, params.name);
			
			opts[0].xAxis = {
				
					data: app.chart0.xAxisData[tindex]
				
			};
			option = zrUtil.merge(opts[app.shownChartIndex], baseOption, false);
		});

	app.shownChartIndex = 0;
	
	opts[app.shownChartIndex].logoColor = getColorPalette()[app.shownChartIndex % getColorPalette().length];
	option = zrUtil.merge(opts[app.shownChartIndex], baseOption, false);
	
    if (chartCfg.showVersion || false) {
            var ecInfo = '<div id="ecInfo" style="position:absolute;top:10px;left:10px;z-index:9999;">#</div>';
        
			//显示ECharts版本及依赖信息
			var tpl = 'Visits:' + zrFormat.addCommas('11223344556600') + '<br />';
			tpl += 'ECharts Version: ' + echarts.version + '<br />';
			zrUtil.each(echarts.dependencies, function(value, key) {
				tpl += zrFormat.toCamelCase('-' + key) + ' Version: ' + value;
			});
		 $(myChart.getDom()).parent().append(ecInfo.replace('#', tpl));
		} else {
		
		}
		
    
		/*Event Binding*/
		
		
		/*Event Binding*/
	
    
截图如下