echarts堆叠柱状图+x轴文字适配宽度换行+数据表组装及转excel下载+自定义图例计算z轴总数+切换折线图时从0开始计算（不堆叠）+自定义柱的颜色
二、效果实现图：
1.初始化后的图：
柱子的颜色为自定义的五种颜色
2.点击右上角的
按钮之后切换成自定义的表格，可点击导出Excel下载。
3.点击右上角
按钮切换到z轴全部从0开始的折线图。
三、代码部分：
js部分：
//来源统计
var sourceChart = echarts.init(document.getElementById('source'));
var myColor = ['#66ade1','#41c8db','#bd52c6','#e8c83f','#f28743'];
var map = data.sourceData;
var title = map.title;
var xArr = map.xArr;
var dataset = map.dataset;
var zArr = map.zArr;
var echartType = map.echartType;
setMulBarOption(title,xArr,zArr,dataset,echartType,sourceChart);
commonChangeToLine(sourceChart);
//堆叠柱状图切换成折线图的方法——仅限于竖叠
function commonChangeToLine(echartName){
echartName.on('magictypechanged', params => {
if(params.currentType==='line'){
for(let i in params.newOption.series){
params.newOption.series[i].stack=null
}
echartName.setOption(params.newOption)
}
if(params.currentType==='bar'){
for(let i in params.newOption.series){
params.newOption.series[i].stack=1
}
echartName.setOption(params.newOption)
}
});
}
//堆叠或横排柱状图
function setMulBarOption(title,xArr,zArr,dataset,echartType,echartElement){
var series = [];
for(var i=0;i'
+ ''+' '
for(var i = 0, l = series.length; i < l; i++){
table += '' + series[i].name + ' '
}
for (var i = 0,l = xArr.length; i < l; i++) {
table += ' '+ ''+xArr[i]+' ';
for(var j = 0;j'
}
table += ' '
}
table += 'csdn的排版实在不好使，原来代码是整齐的，放上来就歪了。
相关说明：
1.代码中的data.sourceData是自己从后台组装出来的map数据，控制台打印出来的dataset是这样的，可供参考
2.其他参数说明：
title——图名
xArr——x轴数据(对应图中的['网站','微信'])
zArr——z轴数据(对应图中的['个人投简','邀请面试','成功握手','达成意向','确认入职'])
echartType——传入'bar2'时为堆叠图，传入其他值为横排的柱状图，可参考echart的API
3.关键代码说明：
3.1 commonChangeToLine(echartName)方法用于堆叠图由柱状图转换成折线图时，z轴各折线从0开始。如果不调用此方法，则默认折线图也是堆叠的形式。作者的需求是堆叠图，所以调用了此方法。若读者的需求是横排的柱状图，则不需要调用此方法。
3.2图例的数值计算的关键代码：
legend: {
width: $("#source").width()-350,
data: zArr,
icon : 'circle',
itemWidth: 12,
formatter: function(name){
var target = 0;
var ds = dataset[indexOf(zArr,name)];
for(var y=0;y3.3x轴文字适配图形宽度而换行的关键代码：
var gridWidth = $("#source").width();
var fontsize = 14; //字体大小默认12px,这里设置成14可以保证label之间的间距
var valueNum = 1;
if(xArr.length<=7){
valueNum = xArr.length;
}else{
valueNum = 7
}
var wordNum = parseInt((gridWidth / valueNum) / fontsize);
var maxLine = 0;
for (var i = 0; i < xArr.length; i++) {
var flag = parseInt(xArr[i].length / wordNum) + 1;
if (flag > maxLine) maxLine = flag;
}
echartElement.on('datazoom', function (params) {
if (params.batch) {
var start = params.batch[0].start;
var end = params.batch[0].end;
} else {
var start = params.start;
var end = params.end;
}
var cur_col_num = ((end - start) / 100) * xArr.length; //计算缩放后可以显示几个柱子
wordNum = parseInt(Math.ceil((gridWidth / cur_col_num)) / 14);//重新计算wordNum
});效果如图：
3.4数据表table转excel下载的关键代码（html页面需要调用相关的js——table转excel的js,还要引入jq，jq的引入放在此js前）：
$("#"+title).table2excel({
exclude: ".noExl", //过滤位置的 css 类名
filename: title , //文件名称
name: "Excel Document Name.xls",
exclude_img: false,
exclude_links: false,
exclude_inputs: false
});