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

最新推荐文章于 2024-05-31 11:25:30 发布
ypf2019
最新推荐文章于 2024-05-31 11:25:30 发布
阅读量1.4k
点赞数 2
CC 4.0 BY-SA版权
分类专栏： echarts
本文链接：https://blog.csdn.net/ypf2019/article/details/109381632
echarts 专栏收录该内容
3 篇文章
订阅专栏
该博客内容展示了三个不同进度——榜样进度、平均进度和实际进度的柱状图。图表详细描绘了工作态度、获客能力等七个能力领域的完成情况，通过颜色和标记区分了各个进度，有助于读者对比和理解各项能力的差距。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
横向倒叙柱状图显示箭头图例
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
                    }
                ]
            }
        }
    ]
}