var xAxisData = [];
var data1 = []; //上半部分的数据
var data2 = []; //下半部分的数据
// 上半部分数据由随机数产生
for (var i = 0; i < 20; i++) {
xAxisData.push('Class' + i);
data1.push((Math.random() * 2).toFixed(2));
}
// 下半部分的数据为上半部分的数据的相反数
data2 = data1.map((item)=>{
return -item
})
// 渲染echarts数据 原理是需要两个柱状图进行拼接 一个是正值向上 一个是相反数向下 通过定位进行“拼接” 两个柱状图共用一个x轴数据
option = {
backgroundColor: '#eee',
toolbox: {
feature: {
magicType: {
type: ['stack', 'tiled']
},
}
},
tooltip: {},
xAxis: [{
gridIndex: 0,
show:false,
data: xAxisData,
}, {
show:false,
gridIndex: 1,
data: xAxisData,
position: "top",
axisLine: {
onZero: true,
}
}],
yAxis: [{
axisLine:{
show:false
},
axisTick:{
show:true
},
position: "left",
splitArea: {
show: false
}
}, {
gridIndex: 1,
position: "left",
splitArea: {
show: false
}
}],
grid: [{
top: "0",
left: "4%",
right: "4%",
bottom: "50.5%"
}, {
top: "50%",
left: "4%",
right: "4%",
}],
series: [{
xAxisIndex: 0,
yAxisIndex: 0,
name: 'bar',
type: 'bar',
emphasis: {
itemStyle: {
barBorderWidth: 1,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
},
data: data1
},
{
xAxisIndex: 1,
yAxisIndex: 1,
name: 'bar',
type: 'bar',
data: data2
},
]
};