echarts-legend中如何配置图标和文字的位置(前后位置)、文字颜色、图标形状、图标宽高、图标间距离、图标中文字和图形的间距

代码在最下方

一.文字在后图标在前,如下图(默认情况下,当不配置legend中的align属性时)

代码如下 align:"left"或者不配置align

二.文字在前图标在后,如下图

代码如下 align:"right"

代码如下

  var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            icon: 'rect',//长方形
            data: ['计划劳务资源', "实际劳务资源"],
            //align: 'left',
            right: 10,//legend距离canvas右边的距离
            //left: 20,
            top:10,//legend距离canvas上面的距离
            textStyle: {//文字颜色
                 fontSize: 12,
                 color: '#F1F1F3',
                 padding:[0,3]//文字与图形之间的左右间距
            },
            itemWidth: 14,//图标宽
            itemHeight: 10,//图标高
            itemGap: 13,//间距
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['1月','2月','3月', '4月'
            ],
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(219,225,255,1)",
                    width: 0,
                    type: "solid"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "rgba(219,225,255,1)",
                }
            },
        }],
        yAxis: [{
            type: 'value',
            name:"单位:人",
            axisLabel: {
                textStyle: {
                     color: "rgba(219,225,255,1)",
                     margin: 15
                },
               // formatter: '{value} %'
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "rgba(219,225,255,1)",
                    width: 1,
                    type: "solid"
                },
            },
            splitLine: {
                show:false,
                lineStyle: {
                    color: "rgba(219,225,255,1)",
                }
            }
        }],
        series: [{
            name: '计划劳务资源',
            type: 'bar',
            data: [38,38,42,48],
            barWidth: 10, //柱子宽度
            barGap: .5, //柱子之间间距
            itemStyle: {
                normal: {//vue中this.$echarts  jquery用echarts 
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 153, 239, 0.8)'
                    }, {
                        offset: 1,
                        color: 'rgba(66, 187, 255, 1)'
                    }]),
                    opacity: 1,
                }
            }
        }, {
            name: '实际劳务资源',
            type: 'bar',
            data: [40, 30, 42, 50],
            barWidth: 10,
            barGap: .5,
            itemStyle: {
                normal: {//vue中this.$echarts  jquery用echarts 
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 242, 159, 1)'
                    }, {
                        offset: 1,
                        color: 'rgba(76, 240, 254, 1)'
                    }]),
                    opacity: 1,
                }
            }
        }]
    };

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值