echarts 三角形柱状图

勇气大爆炸

已于 2024-03-25 09:52:39 修改

阅读量435

点赞数 3

文章标签： echarts 前端 javascript

于 2024-03-25 09:51:02 首次发布

本文链接：https://blog.csdn.net/qq_38260470/article/details/137004668

版权

本文介绍了一个使用ECharts库创建的柱状图，展示了运维一部到四部的人员统计数据，通过pictorialBar类型呈现，详细配置了颜色渐变和轴标签等样式。

摘要由CSDN通过智能技术生成


            var xdata = ['运维一部', '运维二部', '运维三部', '运维四部']
            var data = [150, 120, 130, 145]
            const options = {
                tooltip: {
                    trigger: 'axis',
                    borderRadius: 5,
                    borderColor: '#fff',
                    borderWidth: 1,
                    formatter: function (params) {
                        // 滑动每一条数据对应的数据 params
                        return params[0].axisValue + '<br>' + '人员统计 :' + params[0].value
                    },
                    textStyle: {
                        fontSize: 30//设置文字大小为14像素
                    }
                },
                grid: {
                    left: 40,
                    right: '3%',
                    bottom: 20,
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    data: xdata,
                    triggerEvent: true,
                    axisTick: {
                        // 刻度线
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        rotate: 0,
                        interval: 0,
                        textStyle: {
                            color: '#A3D2FE',
                            fontSize: 28,
                            padding: [16, 0, 0, 0]
                        }
                    }
                },
                yAxis: {
                    triggerEvent: true,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed', // 虚线
                            color: '#5EADFF'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        // y轴线
                        show: true,
                        textStyle: {
                            color: '#A3D2FE',
                            fontSize: 28
                        }
                    }
                },
                series: [
                    {
                        name: 'hill',
                        barMinHeight: 10,
                        type: 'pictorialBar',
                        barCategoryGap: '60%',
                        symbol:
                            'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                        itemStyle: {
                            normal: {
                                // 渐变色
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#D0ECFF'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#64C2FF'
                                    },
                                    {
                                        offset: 1,
                                        color: '#007DD4'
                                    }
                                ])
                            }
                        },
                        data: data,
                        z: 10
                    }
                ]
            }