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

（本文档仅供参考）

问题

想要在echarts上实现像excel上的数据条图：（可以看到中间的为月份，黑色的为指标，红色的为当前月完成的指标，左右两边分别是对应的两个部门）

实现方案

可以通过扩展属性实现此需求：

{
    "grid": [{
        "left": "10%",
        "height": "65%",
        "width": "35%"
    }, {
        "left": "49%",
        "height": "65%",
        "width": "35%"
    }],
    "legend": {
        "x": "left"
    },
    "xAxis": [{
        "type": "value",
        "show": false,
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "onZero": true
        },
        "axisLabel": {
            "show": false
        },
        "gridIndex": 0,
        "name": "",
        "position": "top",
        "inverse": true
    }, {
        "type": "value",
        "show": false,
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "onZero": true
        },
        "axisLabel": {
            "show": false
        },
        "gridIndex": 1,
        "name": "",
        "position": "top"
    }],
    "yAxis": [{
        "gridIndex": 0,
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": false
        },
        "name": "",
        "type": "category",
        "inverse": true,
        "position": "right",
    }, {
        "gridIndex": 1,
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": false
        },
        "axisLabel": {
            "show": false
        },
        "name": "",
        "type": "category",
        "inverse": true,
        "position": "right",
    }],
    "series": [{
        "name": "部门1",
        "type": "bar",
        "label": {
            "normal": {
                "show": true,
                "position": "left"
            }
        },
        "encode": {
            "x": 1,
            "y": 0
        },
        "xAxisIndex": 0,
        "yAxisIndex": 0
    }, {
        "name": "部门2",
        "label": {
            "normal": {
                "show": true,
                "position": "right"
            }
        },
        "encode": {
            "x": 1,
            "y": 0
        },
        "type": "bar",
        "xAxisIndex": 1,
        "yAxisIndex": 1
    }, {
        "encode": {
            "x": 1,
            "y": 0
        },
        "barGap": "-100%",
        "xAxisIndex": 1,
        "yAxisIndex": 1
    }, {
        "encode": {
            "x": 1,
            "y": 0
        },
        "barGap": "-100%",
        "xAxisIndex": 0,
        "yAxisIndex": 0
    }]
}