let seriesData = [
{
name:'2017',
data: [-200, -170, -240, -244, -200, -220, -210, -244, -200, -220]
},
{
name:'2018',
data: [320, 302, 341, 374, 390, 450, 420,320, 302, 341]
},
]
let colorList = ['#5A3FFF','#36F097']
let borderRadius=[[8,0,0,8],[0,8,8,0]]
let legendData = [];
let series = [];
let seriesItem = {
name: '2017',
type: 'bar',
stack: '总量',
barMaxWidth:16,
label: {
show: true,
},
showBackground: false,
backgroundStyle: {
color: 'rgba(243,246,253,0.9)'
},
data: [200, 170, 240, 244, 200, -220, 210]
}
seriesData.forEach((item,index)=>{
legendData.push(item.name);
let itemStyle = {
normal: {
color: colorList[index],
borderRadius:borderRadius[index]
},
}
series.push({...seriesItem,...item,itemStyle})
})
option = {
backgroundColor: '#0a142f',
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: legendData,
bottom:'3%',
itemWidth:12,
itemHeight:8,
textStyle:{
color:'#8998AC',
fontSize:12,
padding:[0,0,-3,0]
}
},
grid: {
left: '3%',
right: '4%',
top:'5%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value',
axisTick: {
show: true
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
},
splitLine: {//纵向分隔线
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.5)',
type: "dotted",
}
},
},
yAxis: [
{
type: 'category',
data: ["Beijing", "Guangzhou", "Shenzhen", "Shanghai","Chengdu","Wuhan","Changsha"],
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#8998AC',
width: 2 //这里是为了突出显示加上的
}
},
axisLabel: {
textStyle: {
color: '#8998AC',
fontSize: 12
}
},
}
],
series
};