Echarts中条形统计图设置两条数据展示效果-图例样式位置设置

option = {
    color: ['#36468C','#B2C8FF'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['上月统计','本月统计'],
        orient:"horizontal",
       x:'right',//图例位置
       y:'top',
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name:"供电数据"
        }
    ],
    series: [
        {
            name: '上月统计',
            type: 'bar',
            barWidth: '40%',
            data: [10, 52, 200, 334, 390, 330, 220],
            
        },
        {
            name: '本月统计',
            type: 'bar',
            barWidth: '40%',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            // markLine: {
            //     lineStyle: {
            //         type: 'dashed'
            //     },
            //     data: [
            //         [{type: 'min'}, {type: 'max'}]
            //     ]
            // }
        },
    ]
};

echarts改变图例样式位置

只需要legend属性中修改如下几个示数即可：
legend：{
   orient:"horizontal",
   x:'right',
   y:' center',
   width:'100',
   padding:[10, 30,0 ,0],
   itemWidth:30,
    textStyle: { //图例文字的样式
         color: '#fff',
         fontSize: 16
    },
}

 

x : 左（left）、右（right）、居中（center）
y : 上（top）、下（bottom）、居中（center）

padding:[0,30,0,0] [（上），（右）、（下）、（左）]

注意：x、y代表图例的位置，padding代表距离某个位置的距离