数据可视化Echarts学习(2)：柱图任务进度完成比例图属性练习柱图堆叠

漏刻有时

于 2020-02-16 10:27:09 发布

阅读量764

点赞数 1

分类专栏： javascript

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/104338997

版权

javascript 专栏收录该内容

190 篇文章 6 订阅

订阅专栏

在这里插入图片描述

option = {
    title:{
        text:'漏刻有时任务进度属性练习',
        x:'center'
    },
    xAxis: {
    show:false,
       type: 'value',
    },
    yAxis: {
        type: 'category',
        axisLine:{show:false},
        axisTick:{show:false},
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: [
    {
        data: [100, 100, 100, 100, 100, 100, 100],
        type: 'bar',
        label:{
            show:false,
        },
        itemStyle:{
            color:'#222',
            barBorderRadius:[0,10,10,0],
            opacity:0.3
        },
        barGap: "-100%",//不同系列的柱间距离，柱子重叠，可以设置 barGap 为 '-100%';
    },
    {
        data: [82, 92, 91, 67, 90, 30, 32],
        type: 'bar',
        label:{
            show:true,
           position:'insideRight',
            textStyle:{
                color:'#fff'
            },
             formatter:'{c}%',//标签内容格式器，支持字符串模板和回调函数两种形式
        },
        itemStyle:{
             barBorderRadius:[0,10,10,0]
        }
    }]
};