首页新闻找找看学习计划

如何设置echarts柱状图两组不同的数据错开显示,目前他们时在一起重叠显示的?

0
[待解决问题]

//同比环比
var myChart= echarts.init(document.getElementById('bar_chart'));
var xAxisData = ['全部','轿车','SUV','MPV'];
var data1 = [1.03,0.44,0.88,0.67]; //同比
var data2 = [-0.4,-0.56,-0.67,-0.53];//环比
option = {
legend: {
itemWidth:15,
itemHeight:4,
fontSize:12,
data: ['同比', '环比'],
right: 55,
top:10,
orient: 'vertical',

},
tooltip: {},
// 设置图标距离上下左右的距离
grid: {
    top: 75,
    left:10,
    right:50,

},
xAxis: {
   
    type: 'category',
    //x轴文字配置
    axisLabel: {
        show: true,
        inside:false,
        // align:'left',
        margin:20,
        textStyle: {
            color: '#1a1a1a',
            fontSize: '14'
        }
    },
    axisTick: {
        show: false
    }, //去掉x轴刻度线
    data:[],
    axisLine: {
        show: true,
        length:2,
        lineStyle:{
            color:"#B5B2B5"
        },
    }
},
yAxis: {
    //y轴不显示
    show:false,
    inverse: false,//是否反向坐标
    axisLine: {
        show: false,
    },
    // y轴刻度不显示
    axisLabel : {
        formatter: function(){
              return "";
        }
    },
    splitLine:{
        show:false
    },
    splitArea: {show: false}
},
series: [
    {
        name: '同比',
        type: 'bar',
        barGap: '-100%',
        barWidth: '15%',
        stack: 'one',
        data: [],
        itemStyle: {
            normal: {
                label: {
                    show: true,     //开启显示
                    position: 'top',    //在上方显示
                    formatter: '{c}%',//每一项加%
                    textStyle: {        //数值样式
                        color: '#1a1a1a',
                        fontSize: 12
                    }
                },
                barBorderRadius: 100,
                color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [{
                            offset: 0,
                             color: '#f89741'
                            
                        },
                        {
                            offset: 1,
                             color: '#fa6206'
                        }
                    ]
                )
            }
        },
    }, {
        name: '环比',
        type: 'bar',
        barWidth: '15%',
        stack: 'one',
        data: [],  
        itemStyle: {
            normal: {
                label: {
                    show: true,     //开启显示
                     position: 'bottom',    //在上方显
                    formatter: '{c}%',//每一项加%
                    textStyle: {        //数值样式
                        color: '#1a1a1a',
                        fontSize: 12
                    }
                },
                barBorderRadius: 100,
                color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [{
                            offset: 0,
                            color: '#0c7be3'
                            
                            
                        },
                        {
                            offset: 1,
                             color: '#42d3f7'
                        }
                    ]
                )
            }
        },
    },
    
]

};

myChart.setOption(option);

凹凸曼啦的主页 凹凸曼啦 | 初学一级 | 园豆:189
提问于:2020-03-24 17:07
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册