本作品基于EC3.2.0,修改部分源代码
配置项如下
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);
});