echarts 自定义纵向柱状图

在此记录：

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                yAxis: [
                    {
                        show: true,
                        boundaryGap: true,
                        type: 'category',
                        data: ['PM10', 'PM2.5', 'NO2', 'SO2', 'O3', 'CO'],
                        axisLine: {
                            //y轴
                            show: false,
                        },
                        axisTick: {
                            //y轴刻度线
                            show: false,
                        },
                        splitLine: {
                            //网格线
                            show: false,
                        },
                    },
                ],
                xAxis: [
                    {
                        show: false,
                        type: 'value',
                        name: '销量(kg)',
                        splitLine: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        type: 'bar',
                        // 后端数据
                        data: [
                            forecastWeatherQualityArr.value.pm10,
                            forecastWeatherQualityArr.value.pm25,
                            forecastWeatherQualityArr.value.no2,
                            forecastWeatherQualityArr.value.so2,
                            forecastWeatherQualityArr.value.o3,
                            forecastWeatherQualityArr.value.co,
                        ],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'right',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '12px',
                                    },
                                },
                            },
                        },
                    },
                ],
            };

效果：

纵向柱状图.png

推荐一个可以看很多图表案例的网站: http://ppchart.com/#/