百分比堆叠图ECharts Gallery

20:11:45图表已生成
代码
	var json = {
		
		chart1: {
			legend: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
			legendSelected: {
				'邮件营销': true,
				'联盟广告': false,
				'视频广告': false,
				'直接访问': false,
				'搜索引擎': false
			},
			series: [{
				name: '直接访问',
				data: [120, 100, 101, 134, 90, 230, 210]
			}, {
				name: '邮件营销',
				data: [220, 182, 300, 234, 100, 330, 310]
			}, {
				name: '联盟广告',
				data: [150, 232, 300, 566, 52, 89, 410]
			}, {
				name: '视频广告',
				data: [180, 332, 200, 334, 390, 330, 320]
			}, {
				name: '搜索引擎',
				data: [820, 932, 60, 934, 63, 1330, 1320]
			}]
		}
	};
	
	var oldChart1Data = zrUtil.clone(zrUtil.map(json.chart1.series.slice(), function(item, index) {
		return item.data;
	}));
	var oldSeries = zrUtil.clone(json.chart1.series);

	function calcPerStack(showArr) {

		var cols = oldSeries[0].data.length;
		var rows = oldSeries.length;
		var result = [];
		for (var i = 0; i < cols; i++) {
			var arr = [];
			oldSeries.forEach(function(item, index) {
				if (zrUtil.indexOf(showArr, item.name) > -1) {
					arr.push(item.data[i]);
				} else {
					arr.push(0);
				}
			});
			var total = (0, eval)(arr.join('+'));
			var perArray = [];
			arr.forEach(function(item, index) {
				perArray.push(item / total * 100);
			});

			result.push(perArray);
		}

		for (var i = 0; i < cols; i++) {
			for (var j = 0; j < rows; j++) {
				json.chart1.series[j].data[i] = result[i][j];
			}
		}
	}

	calcPerStack(json.chart1.legend);
	
	option = {
		legend: {
			data: function() {
				return zrUtil.map(json.chart1.legend, function(item, index) {
					return {
						name: item,
						icon: 'pin'
					};
				});
			}()
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		tooltip: {
			trigger: 'axis',
			padding: 0,
			extraCssText: 'box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'line' // 默认为直线，可选为：'line' | 'shadow'
			},
			backgroundColor: 'rgba(255,255,255,0)',
			show: true,
			formatter: function(params) {
				var stl = '';
				var colIndex = 0;
				$(params).each(function(index, serie) {
					var colors = myChart.getOption().color;
					var color = colors[index % colors.length];
					//color = serie.color;
					if (oldChart1Data[index][serie.dataIndex] != '-') {
						stl += '<br /> <div style="display:inline-block;width:10px;height:10px;border-radius:5px;background:' + color + ';"></div> ' + serie.seriesName + ': ' + oldChart1Data[index][serie.dataIndex] //serie.value;
					}
				});
				if (zrUtil.isArray(params)) {
					return '<div style="background:#fff;padding:15px;color:#999;border-radius:5px;">' + params[0].name + stl + '</div>';
				}
				return '<div style="background:#fff;padding:15px;color:#999;border-radius:5px;">' + params.name + stl + '</div>';
			}
		},
		xAxis: [{
			type: 'category',
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		}],
		yAxis: [{
			type: 'value',
			max:100
		}],
		series: [{
			name: '直接访问',
			barGap: 0,
			type: 'bar',
			stack: '百分比',
			data: json.chart1.series[0].data //[320, {value:'-', itemStyle:{normal:{opacity:0}}},20]
		}, {
			name: '邮件营销',
			barGap: 0,
			type: 'bar',
			stack: '百分比',
			data: json.chart1.series[1].data
		}, {
			name: '联盟广告',
			barGap: 0,
			type: 'bar',
			stack: '百分比',
			data: json.chart1.series[2].data
		}, {
			name: '视频广告',
			barGap: 0,
			type: 'bar',
			stack: '百分比',
			data: json.chart1.series[3].data
		}, {
			name: '搜索引擎',
			barGap: 0,
			type: 'bar',
			stack: '百分比',
			data: json.chart1.series[4].data
		}]
	};
	
	
	myChart.on('legendselectchanged', function(params) {
			var selected = [];
			zrUtil.each(params.selected, function(value, key) {
				if (value) {
					selected.push(key);
				}
			});
			calcPerStack(selected);
			myChart.setOption(option);
		});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
