echart 柱状图 ---- 坐标轴、网格、柱体配置

桃扇骨 2023-06-07 03:19 36阅读 0赞

**代码如下：**

var maintainTypeChart;
    function loadMaintainTypeChart() { 
        var option = { 
            grid: { 
                left: '3%',
                right: '3%',
                bottom: '15%',
                top: '5%',
                containLabel: true
            },
            xAxis: { 
                type: 'category',
                axisTick: { 
                    show: false//隐藏x坐标轴刻度
                },
                //x轴字体样式
                axisLabel: { 
                    show: true,
                    textStyle: { 
                        color: '#42436A',
                        fontSize:'12',
                    },
                    rotate:"30" //字体倾斜角度
                },
                //x轴颜色
                axisLine: { 
                    lineStyle: { 
                        color: "#e4e4e4",
                    }
                },
                data: ['wifi', '视频', '车辆', '人脸', '小电']
            },
            yAxis: { 
                type: 'value',
                minInterval: 1,//只显示整数
                axisLine: { 
                    show: false//隐藏y坐标轴
                },
                //y轴字体样式
                axisLabel: { 
                    show: true,
                    textStyle: { 
                        color: '#9495ab',
                        fontSize:'12'
                    }
                },
                //网格样式
                splitLine: { 
                    show: true,
                    lineStyle:{ 
                        color: '#e4e4e4',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisTick: { 
                    show: false//隐藏y坐标轴刻度
                }
            },
            tooltip: { 
                trigger: 'axis',
                axisPointer : {             // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: "{a} {b} : {c}"
            },
            series: [{ 
                    name: '',
                    type: 'bar',
                    barWidth : 6,//柱体宽度
                    itemStyle: { 
                        normal: { 
                            //柱体圆角
                            barBorderRadius:[10, 10, 0, 0],
                            //柱体颜色渐变
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                offset: 0,
                                color: '#6A88FF'
                            }, { 
                                offset: 1,
                                color: '#3787FF'
                            }]),
                        }
                    },
                    data: [5, 5, 5, 5, 5]
                },
                { 
                    name: '',
                    type: 'bar',
                    barWidth : 6,//柱体宽度
                    itemStyle: { 
                        normal: { 
                            //柱体圆角
                            barBorderRadius:[10, 10, 0, 0],
                            //柱体颜色渐变
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                offset: 0,
                                color: '#FFCA41'
                            }, { 
                                offset: 1,
                                color: '#FBAD54'
                            }]),
                        }
                    },
                    data: [3, 3, 3, 2, 2]
                }
            ]
        };
        maintainTypeChart = echarts.init(document.getElementById('maintain-type-chart'));
        maintainTypeChart.setOption(option);
    }
    loadMaintainTypeChart();

**效果图：**  
![在这里插入图片描述][20191014094931861.png]

[20191014094931861.png]: /images/20230601/792a03d307f14a5995541ff5d11c4f7b.png