页面树结构
转至元数据结尾
转至元数据起始

正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史

版本 1 下一个 »

(本文档仅供参考)

问题1:

类似于这种进度条要怎么实现:

解决方案:

可通过下面的步骤实现进度条的效果:

步骤1:选择数据作图,如下图:

步骤2:选择横条图,设置X轴Y轴,如下图:

步骤3:X轴设置如下:

步骤4:Y轴设置如下:

步骤5:设置柱子宽度:

步骤6:添加如下扩展属性:

具体的扩展属性如下:

{
    "series": [{
        //如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
        "barGap": "-100%",
        "z": 1,
        //设置圆角
        "itemStyle": {
            "barBorderRadius": 5
        },
        //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件
        "silent": false
    }, {
        "barGap": "-100%",
        "z": 0,
        "itemStyle": {
            "barBorderRadius": 5
        },
        "silent": true
    }],
    //设置颜色
    "color": ["#5A8FF9", "#EEEEEE"],
    "xAxis": {
        "axisTick": {
            //是否显示坐标轴刻度
            "show": false
        }
    }
}

若需要加其他数据进行提示,可按下图操作:

效果图如下:

问题2:

类似于这种进度条要怎么实现,后面的指标需要是百分比:

解决方案:

可通过下面的步骤实现进度条的效果:

步骤1:选择数据作图,如下图:

说明:如果数据要显示百分比,可以对字段设置单元格的格式,如下图操作:

步骤2:选择横条图,设置X轴Y轴,如下图:

步骤3:X轴设置如下:

步骤4:Y轴设置如下:

步骤5:设置柱子宽度:

步骤6:添加如下扩展属性:

具体的扩展属性如下:

  {
    "series": [{
        //如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
        "barGap": "-100%",
        "z": 1,
        //设置圆角
        "itemStyle": {
            "barBorderRadius": 5
        },
        //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件
        "silent": false
    }, {
        "barGap": "-100%",
        "z": 0,
        "itemStyle": {
            "barBorderRadius": 5
        },
        "silent": true
    }],
    //设置柱子的颜色,前一个颜色的顶层的,后一个颜色的底部的颜色,可设置成灰色等
    "color": ["#faa755", "#d3d7d4"],
    "xAxis": {
        "axisTick": {
            //是否显示坐标轴刻度
            "show": false
        }
    }
}

若需要加其他数据进行提示,可按下图操作:

效果图如下:

  • 无标签