echarts 一个横向柱状图表实例收藏

效果如图：

1.先在页面中引入js

<script src="{{asset('assets/js/echarts.min.js')}}"></script>

2.插入js代码

var category = ['调查取证', '公证中', '证据固定', '发律师函', '撰写诉状', '诉状盖章', '信息披露', '预立案', '法院立案', '法院开庭', '等待赔偿', '已结案'];
var barData = []; //这里存放数据
var option33 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        top: '2%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        data: category,
        splitLine: {show: false},
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        offset: 10,
        nameTextStyle: {
            fontSize: 15
        }
    },
    series: [
        {
            name: '数量1',
            type: 'bar',
            data: barData,
            barWidth: 10,
            //barGap: -300,
            //barCategoryGap:-300,
            smooth: true,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    offset: [5, -2],
                    textStyle: {
                        color: '#F68300',
                        fontSize: 13
                    }
                }
            },
            itemStyle: {
                emphasis: {
                    barBorderRadius: 7
                },
                normal: {
                    barBorderRadius: 7,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            {offset: 0, color: '#3977E6'},
                            {offset: 1, color: '#37BBF8'}

                        ]
                    )
                }
            }
        }
    ]
};
var myChart33 = echarts.init(document.getElementById('case_status_num_datav'));
myChart33.setOption(option33);

3.在页面内容中建立一个ID : '

case_status_num_datav

的div。

刷新一下页面，效果就出来了。
至于 data 数据，你就可以通过ajax 从后端拿取。