Echarts 柱状图上下对称

对称"/>

Echarts 柱状图上下对称

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
        },
    ]
};