配置项如下
var data1 = [636, 1134, 673, 100, 140];
var data2 = [309, 510, 442, 64, 82];
var data3 = [83, 233, 299, 15, 20];
var data4 = [419, 1969, 1140, 271, 316];
var data5 = [227, 274, 363, 42, 47];
var data6 = [207, 170, 187, 11, 30];
var xAxisData = ['禅城区', '南海区', '顺德区', '高明区', '三水区'];
var dataTotal = function() {
var data = [];
for (var i = 0; i < data1.length; i++) {
data.push(data1[i] + data2[i] + data3[i] + data4[i] + data5[i] + data6[i]);
}
return data;
}
option = {
color: ['#00a2ff', '#b0df9b', '#deef81', '#f8f872', '#7debf2', '#2ae2f2'],
backgroundColor: '#000',
legend: {
right: '0%',
bottom: '8%',
itemWidth: 20,
itemHeight: 20,
textStyle: {
color: '#ddd',
fontSize: 22
},
orient: 'vertical',
data: ['(商品)房屋', '(商品)食品', '(商品)日用百货', '(服务)制作和保养服务', '(服务)餐饮服务', '(服务)物业服务'],
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#ddd',
},
},
},
grid: {
left: '1%',
right: '23%',
top: 80,
bottom: 50,
containLabel: true,
},
xAxis: {
show: true,
axisLabel: {
interval: 0,
rotate: 0,
margin: 10,
textStyle: {
color: '#fff',
align: 'center',
fontSize: 22
},
},
axisLine: {
lineStyle: {
color: '#3399ff',
width: 2
}
},
axisTick: {
alignWithLabel: true,
lineStyle: {
color: 'none',
},
},
data: xAxisData
},
yAxis: [{
type: 'value',
name: '',
nameTextStyle: {
color: '#fff',
fontSize: 22
},
splitNumber: 4,
axisLabel: {
margin: 15,
textStyle: {
color: '#fff',
fontSize:22
},
},
axisLine: {
lineStyle: {
color: '#3399ff',
width: 2
}
},
axisTick: {
alignWithLabel: true,
length: 10,
lineStyle: {
color: '#3399ff',
width: 2
},
},
splitLine: {
show: false,
},
}],
series: [{
name: '整合值',
type: 'line',
stack: '总量',
smooth: true,
data: dataTotal(),
lineStyle: {
normal: {
width: 0
}
},
symbolSize: 1,
itemStyle: {
normal: {
borderWidth: 0
}
},
label: {
normal: {
show: true,
offset: [0, -10],
position: 'top',
textStyle: {
color: '#fff',
fontSize: 22
}
}
},
}, {
itemStyle: {
normal: {
show: true,
barBorderRadius: 5,
}
},
type: 'bar',
name: '(商品)房屋',
stack: '问题',
data: data1,
}, {
itemStyle: {
normal: {
show: true,
barBorderRadius: 5,
}
},
barMaxWidth: '50%',
type: 'bar',
name: '(商品)食品',
stack: '问题',
data: data2,
}, {
itemStyle: {
normal: {
show: true,
barBorderRadius: 5,
}
},
type: 'bar',
name: '(商品)日用百货',
stack: '问题',
data: data3,
}, {
itemStyle: {
normal: {
show: true,
barBorderRadius: 5,
}
},
type: 'bar',
name: '(服务)制作和保养服务',
stack: '问题',
data: data4,
}, {
itemStyle: {
normal: {
show: true,
barBorderRadius: 5,
}
},
type: 'bar',
name: '(服务)餐饮服务',
stack: '问题',
data: data5,
}, {
itemStyle: {
normal: {
show: true,
barBorderRadius: 5,
}
},
type: 'bar',
name: '(服务)物业服务',
stack: '问题',
data: data6,
}]
};