實(shí)現(xiàn)如下圖所示的柱形圖：

image.png

• 網(wǎng)站：http://chart.majh.top/
• 示例網(wǎng)址：http://chart.majh.top/xdrkELTGnr

• 示例代碼：

var labelData = ['黨小組、村（居）民組會(huì)議', '糧油副食群眾通過電話或口頭等方式', '群眾通過微信、QQ等方式退出', '黨員議事日', '意見箱', '包組干部收集到群眾的需求', '落實(shí)上級(jí)黨委政府工作安排', '其它'];
var valueData = [52, 32, 12, 53, 65,36,69,29];
var option = {
    backgroundColor: '#013B6F',
    xAxis: {
        show: false,
    },
    tooltip: {
        show: true,
    },
    yAxis: [
        {
            splitLine: 'none',
            axisLine: 'none',
            axisLabel: {
                verticalAlign: 'top',
                align: 'left',
                padding: [20, 0, 0, 10],//文字與柱狀圖的距離
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: '16',
                },
            },
            data: labelData,
        },
        {
            axisLine: 'none',
            data: valueData,
            axisLabel: {
                show: true,
                verticalAlign: 'bottom',
                align: 'right',
                padding: [30, 10, -40, 0],//數(shù)據(jù)與圖形的距離
                textStyle: {
                    color: '#fff',
                    fontSize: '16',
                }
            },
        },
    ],
    series: [
        {
            type: 'bar',
            showBackground: true,
            data: valueData,
            barWidth: 18,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: 'rgba(41, 204, 255, 1)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(10, 116, 255, 1)',
                        },
                    ]),
                },
            },
        },
    ],
};