Echarts横向倒叙柱状图显示箭头

横向倒叙柱状图显示箭头图例

option = {
    title: {
        text: '能力进度条',

    },
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    legend: {
        data: ['实际进度', '平均进度', '榜样进度']
    },
    grid: {

        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        show: false
    },
    yAxis: {
        type: 'category',
        data: ['工作态度', '获客能力', '开单能力', '增员能力', '团队管理能力', '高客拓展能力', '学习能力'],
        axisTick: {
            show: false
        },
        inverse: true,
        axisLine: {
            show: false
        }
    },
    series: [{
            name: '榜样进度',
            type: 'bar',
            barGap: '-100%',
            barCategoryGap: '70%',
            /*多个并排柱子设置柱子之间的间距*/
            // barCateGoryGap:1, //关键第二句:值或为百分比 ‘60%’ ,如果同一类目下的柱间距:barGap:2
            itemStyle: {
                normal: {
                    color: 'rgba(128,128,128,1)',
                    label: {
                        formatter: "\n\n\n\n\n\n榜样进度",
                        show: true,
                        position: 'insideRight',
                        textStyle: {
                            fontSize: 9,
                            fontFamily: 'Microsoft YaHei',
                            fontStyle: 'normal',
                            fontWeight: 'bold'
                        }
                    },


                }
            },
            data: [100, 100, 100, 100, 100, 100, 100],
            markPoint: {
                symbol:
                    'path://M708.49298 138.982839l-140.580343-119.812792c-33.547582-25.560062-81.472699-25.560062-115.020281 0l-140.580344 119.812792c-17.572543 17.572543-20.767551 43.132605-4.792511 59.107645s43.132605 20.767551 59.107644 4.792511l102.24025-84.667706v862.652106c0 25.560062 17.572543 43.132605 43.132605 43.132605s43.132605-17.572543 43.132605-43.132605V123.0078l102.24025 84.667707c4.792512 4.792512 17.572543 7.98752 25.560062 7.98752 12.780031 0 25.560062-4.792512 33.547582-17.572543 12.780031-15.975039 12.780031-41.535101-7.987519-59.107645z',
                symbolKeepAspect: true,
                symbolSize: [10, 65],
                label: {
                    position: "insideTop",
                    // distance: 7,
                    show: false
                },
                data: [{
                        xAxis: 100,
                        yAxis: 0
                    },
                    {
                        xAxis: 100,
                        yAxis: 1
                    },
                    {
                        xAxis: 100,
                        yAxis: 2
                    },
                    {
                        xAxis: 100,
                        yAxis: 3
                    },
                    {
                        xAxis: 100,
                        yAxis: 4
                    },
                    {
                        xAxis: 100,
                        yAxis: 5
                    },
                    {
                        xAxis: 100,
                        yAxis: 6
                    }
                ]
            }
        },
        {
            name: '平均进度',
            type: 'bar',
            barGap: '-100%',
            barCategoryGap: '70%',
            /*多个并排柱子设置柱子之间的间距*/
            // barCateGoryGap:1, //关键第二句:值或为百分比 ‘60%’ ,如果同一类目下的柱间距:barGap:2
            itemStyle: {
                normal: {
                    color: 'green',
                    label: {
                        formatter: "\n\n\n\n\平均进度",
                        show: true,

                        position: 'insideRight',
                        textStyle: {
                            fontSize: 9,
                            fontFamily: 'Microsoft YaHei',
                            fontStyle: 'normal',
                            fontWeight: 'bold'
                        }

                    },


                }
            },
            data: [30, 40, 50, 60, 40, 50, 60],
            markPoint: {
                symbol:
                    'path://M708.49298 138.982839l-140.580343-119.812792c-33.547582-25.560062-81.472699-25.560062-115.020281 0l-140.580344 119.812792c-17.572543 17.572543-20.767551 43.132605-4.792511 59.107645s43.132605 20.767551 59.107644 4.792511l102.24025-84.667706v862.652106c0 25.560062 17.572543 43.132605 43.132605 43.132605s43.132605-17.572543 43.132605-43.132605V123.0078l102.24025 84.667707c4.792512 4.792512 17.572543 7.98752 25.560062 7.98752 12.780031 0 25.560062-4.792512 33.547582-17.572543 12.780031-15.975039 12.780031-41.535101-7.987519-59.107645z',
                symbolKeepAspect: true,
                symbolSize: [10, 65],
                label: {
                    position: "insideTop",
                    // distance: 7,
                    show: false
                },
                data: [{
                        xAxis: 30,
                        yAxis: 0
                    },
                    {
                        xAxis: 40,
                        yAxis: 1
                    },
                    {
                        xAxis: 50,
                        yAxis: 2
                    },
                    {
                        xAxis: 60,
                        yAxis: 3
                    },
                    {
                        xAxis: 40,
                        yAxis: 4
                    },
                    {
                        xAxis: 50,
                        yAxis: 5
                    },
                    {
                        xAxis: 60,
                        yAxis: 6
                    }
                ]
            }
        },

        {
            name: '实际进度',
            type: 'bar',
            barGap: '-100%',
            barCategoryGap: '70%',
            /*多个并排柱子设置柱子之间的间距*/
            // barCateGoryGap:1, //关键第二句:值或为百分比 ‘60%’ ,如果同一类目下的柱间距:barGap:2
            itemStyle: {
                normal: {
                    color: 'red',
                    label: {
                        formatter: "\n\n\实际进度",
                        show: true,
                        position: 'insideRight',
                        textStyle: {
                            fontSize: 9,
                            fontFamily: 'Microsoft YaHei',
                            fontStyle: 'normal',
                            fontWeight: 'bold'
                        }
                    },


                }
            },
            data: [50, 60, 30, 50, 100, 40, 65],
            markPoint: {
                symbol:
                    'path://M708.49298 138.982839l-140.580343-119.812792c-33.547582-25.560062-81.472699-25.560062-115.020281 0l-140.580344 119.812792c-17.572543 17.572543-20.767551 43.132605-4.792511 59.107645s43.132605 20.767551 59.107644 4.792511l102.24025-84.667706v862.652106c0 25.560062 17.572543 43.132605 43.132605 43.132605s43.132605-17.572543 43.132605-43.132605V123.0078l102.24025 84.667707c4.792512 4.792512 17.572543 7.98752 25.560062 7.98752 12.780031 0 25.560062-4.792512 33.547582-17.572543 12.780031-15.975039 12.780031-41.535101-7.987519-59.107645z',
                symbolKeepAspect: true,
                symbolSize: [10, 65],
                label: {
                    position: "insideTop",
                    // distance: 7,
                    show: false
                },
                data: [{
                        xAxis: 50,
                        yAxis: 0
                    },
                    {
                        xAxis: 60,
                        yAxis: 1
                    },
                    {
                        xAxis: 30,
                        yAxis: 2
                    },
                    {
                        xAxis: 50,
                        yAxis: 3
                    },
                    {
                        xAxis: 100,
                        yAxis: 4
                    },
                    {
                        xAxis: 40,
                        yAxis: 5
                    },
                    {
                        xAxis: 65,
                        yAxis: 6
                    }
                ]
            }
        }
    ]
}
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值