vue项目，现在要做一个柱状图

Question

现在要做一个这样的表图，看了一上午的echarts，还是做不出来，echarts的标签只能有一个，不能像效果图上那样展示上面和下面的值，而且起始值为80的话，值为108，用echarts会直接高到188的位置，求大神给个思路哇。。。

Answer 1

简单的写了一个例子

option = {
    legend: {
        data: ['低压','差值', '高压'],
        show: false
    },
    grid: {
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四']
    },
    yAxis: {
        type: 'value',
        min: 45,        // y轴可设置最小值，当然你也可以设置最大值max
        interval: 15    // 刻度线的距离
    },
    series: [{
        name: '低压',
        type: 'bar',
        stack: '血压',
        label: {
            normal: {
                show: true,
                position: 'insideTop',    // 底部文字显示设置
                color: '#333'
            }
        },
        data: [80, 81, 75, 78],
        itemStyle: {
            normal: {
                color: 'transparent'        // 底部设置为透明，就可以不显示了
            }
        },
        markLine: {                        // 用markLine设置血压正常范围的表现
            symbol: ['none', 'none'],
            lineStyle: {
                normal: {
                    color: 'green'
                }
            },
           data: [{
                yAxis: 75    
            }, {
                yAxis: 150
            }],
        }
    }, {
        name: '差值',
        type: 'bar',
        stack: '血压',
        label: {
            normal: {
                show: false,
                position: 'top'
            }
        },
        data: [28, 41, 30, 63]            // 显示的这一部分柱状图，应该为血压最大值-最小值的差值
    },
    {
        name: '高压',
        type: 'bar',
        
        barGap: '-100%',
        label: {
            normal: {
                show: true,
                position: 'top',
                color: '#333'
            }
        },
        itemStyle: {
            normal: {
                color: 'transparent'        // 底部设置为透明，就可以不显示了
            }
        },
        data: [108, 122, 105, 141]            // 显示的这一部分柱状图，应该为血压最大值-最小值的差值
    }]
};

Answer 2

http://echarts.baidu.com/demo...
看下这个，和你想要的效果非常相似

看到它的实现是利用两组数据把不用的隐藏掉，注掉相关部分就能看见了，至于上下两个数字，可能需要处理一下，但是应该还是可以实现的，你也仔细想想

Answer 3

集成百度的Echarts即可