echarts横向柱状图

1、效果例子

https://gallery.echartsjs.com/editor.html?c=xByfdMz7mM

2、Html部分给该柱状图一个id

<div id="vehicleUseRate" class="charts" style="position: relative"></div>

3、js部分渲染代码，数据从后台返回

<script>
$(function () {
var vehicleUseRateChart = echarts.init(document.getElementById('vehicleUseRate'));
vehicleUseRateChart.showLoading();
$.ajax({
    url: 'driver/vehicleUseRate.do',
    data: {
        name: $("#beginDate").val()
    },
    dataType: 'json',
    type: 'post',
    success: function createBar(data) {
        vehicleUseRateChart.hideLoading();
        markers = data;

        var ccOption = {
            title: {
                text: $.i18n.prop('UnitHours'),
                textStyle: {
                    fontWeight: '1px',
                    color: '#000000'
                },
                x: '5%',
                y: '4%'
            },

            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: 'shadow'
                }
            },
            color: ['#F19149'],
            legend: {
                itemWidth: 10,
                itemHeight: 8,
                data:'横向排序数据',
                textStyle: {
                    fontWeight: '1px',
                    color: '#000000'
                },
                x: '72%',
                y: '4%'
            },
            grid: {
                top: '13%',
                bottom: '14%',
                backgroundColor: 'rgba((255,255,255,0.1)',
                left: '25%',
                width: '60%',
                heigth: '55%'
            },
            textStyle: {
                decoration: 'none',
                fontFamily: 'Arial, Verdana, sans-serif',
                fontFamily2: '微软雅黑',
                fontSize: 12,
                fontStyle: 'normal',
                fontWeight: 'normal'
            },
            toolbox: {
                feature: {
                    mark: {
                        show: false
                    },
                    dataView: {
                        show: false,
                        readOnly: false
                    },
                    magicType: {
                        show: false,
                        type: ["bar"]
                    },
                    restore: {
                        show: false
                    },
                    saveAsImage: {
                        show: false
                    }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: "value",
                    name: "",
                    axisLabel: {
                        show: false,
                        interval: 'auto',
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#3FC79B',
                            width: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: ['#50FEC1'],
                            width: 0.2,
                            type: 'solid'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: "category",
                    data: data.xArray,
                    inverse: true,//不加这个属性数据排序会倒过来
                    name: "",
                    axisLabel: {
                        inteval: 0,
                        rotate: 0
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#000000',
                            width: 1
                        }
                    },
                    axisTick: {
                        show: false
                    }
                }

            ],
            series: [
                {
                    symbol: "none",
                    symbolSize: 8,
                    name: '横向排序数据',
                    type: "bar",
                    barMaxWidth: 30,
                    barWidth: 12,
                    data: data.result,

                    markPoint: {
                        symbol: 'pin',
                        symbolRotate: '100',
                        position: '100%',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 14
                                    }
                                }
                            }
                        },
                        symbolSize: [1, 1],
                        symbolOffset: [30, 15]
                    },
                    itemStyle: {
                        normal: {
                            barBorderRadius: 0,
                            color: new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0,
                                    [
                                        {offset: 0, color: '#4519E9'},
                                        {offset: 0.3, color: '#644FFF'},
                                        {offset: 0.6, color: '#2FD4FD'},
                                        {offset: 1, color: '#2FD4FD'}

                                    ]
                            )

                        }
                    }
                }
            ]
        };

        window.addEventListener("resize", function () {
            vehicleUseRateChart.resize();
        });
        vehicleUseRateChart.off('click');
        vehicleUseRateChart.on('click', function (param) {
            showVehicleRunDetailTime(data.forkliftIds[param.dataIndex], data.accountNumbers[param.dataIndex]);
        });
        vehicleUseRateChart.setOption(ccOption);
    }
});
}

</script>