echarts:实现3D柱状图柱状图渐变颜色设置

最新推荐文章于 2024-09-14 08:42:04 发布

妮妮学代码

最新推荐文章于 2024-09-14 08:42:04 发布

阅读量3.2k

点赞数 2

分类专栏：前端知识文章标签： echarts 3d 前端前端框架

本文链接：https://blog.csdn.net/weixin_44899642/article/details/125678587

版权

前端知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何使用 ECharts 框架实现柱状图中柱体及菱形图例的颜色渐变效果。通过设置 `pictorialBar` 类型的图标，结合 `diamond` 符号和 `linear` 渐变颜色，创建出具有视觉吸引力的数据展示。同时，文章还展示了如何调整柱状图的宽度、间距、文字样式等属性，以优化图表的整体布局。

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

实现效果如图所示：

在这里插入图片描述

代码展示

   function echart_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_3'));
        var barWidth = 15;
        var  cahoqi_data=[410, 420, 520, 520, 610];//data: [410, 420, 520, 520, 610]
        var  jinchaoqi_data=[310, 120, 420, 220, 510];

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: [{
                    name: '超期',
                    icon: 'roundRect1',
                    color: {
                        type: 'linear',
                        x: 0,
                        x2: 1,
                        y: 0,
                        y2: 0,
                        colorStops: [
                            { offset: 0, color: 'rgba(5, 75, 170, 1)' },
                            { offset: 1, color: 'rgba(11, 151, 232, 1)' }
                        ]
                    } //盖子的颜色
                }, {
                    name: '近超期',
                    icon: 'roundRect1',
                    color: {
                        type: 'linear',
                        x: 0,
                        x2: 1,
                        y: 0,
                        y2: 0,
                        colorStops: [
                            { offset: 0, color: 'rgba(90, 45, 192, 1)' },
                            { offset: 1, color: 'rgba(184, 91, 225, 1)' }
                        ]
                    } //盖子的颜色
                }, '4'],
                selectedMode: false,//取消图例上的点击事件
                x: 'center',
                bottom: '2%',
                itemWidth: 16,  // 设置宽度
                itemHeight: 10, // 设置高度
                itemGap: 50,// 设置间距
                textStyle: {//文字根据legend显示 
                    color: "#FFFFFF",
                    fontSize: 12,
                },
            },
            grid: {
                left: '8%',
                top: '18%',
                right: '8%',
                bottom: '12%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                triggerEvent: true,
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: "#FFFFFF",
                    fontSize: '14',
                    // interval: 0,
                    // rotate: rotate//文字旋转角度
                },
                axisTick: {
                    // show: false,
                    alignWithLabel: true,
                    lineStyle: {
                        color: '#0C4F81',
                        type: 'solid'
                    }
                },
                // data: xAxisData,
                data: ['1月', '2月', '3月', '4月', '5月'],
            },
            yAxis: {
                type: 'value',
                nameTextStyle: {
                    color: '#4F88BD',
                    padding: [0, 25, -5, 0],
                    fontSize: 12,
                    fontFamily: 'Microsoft YaHei',
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#0C4F81"
                    }
                },
                axisLabel: {
                    color: "#4F88BD",
                    fontSize: '12',
                    formatter: '{value}'
                },
                splitLine: {
                    lineStyle: {
                        type: "dotted",
                        color: "#0C4F81"
                    }
                },
                axisTick: {
                    show: false
                },
    
            },
            series: [
                {
                    z: 2,
                    name: '超期',
                    type: 'pictorialBar',
                    symbolPosition: 'end',
                    data: cahoqi_data,
                    symbol: 'diamond',
                    symbolOffset: ['-70%', '-40%'], //盖子的位置
                    symbolSize: [15, 13], //盖子的大小
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            x2: 1,
                            y: 0,
                            y2: 0,
                            colorStops: [
                                { offset: 0, color: 'rgb(7,108,196)' },
                                { offset: 1, color: 'rgba(30, 169, 237, 1)' }
                            ]
                        } //上方菱形颜色设置
                    },
                    tooltip: {
                        show: false
                    }
                },
                {
                    z: 1,
                    type: 'bar',
                    name: '超期',
                    barWidth: barWidth,
                    barGap: '50%',
                    data: cahoqi_data,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            x2: 1,
                            y: 0,
                            y2: 0,
                            colorStops: [
                                { offset: 0, color: 'rgba(5, 75, 170, 1)' },
                                { offset: 0.5, color: 'rgba(11, 151, 232, 1)' },
                                { offset: 0.5, color: 'rgba(10, 57, 123, 1)' },
                                { offset: 1, color: 'rgba(16,78,145, 1)' }
                            ]
                        }
                    }
                },
                {
                    z: 2,
                    name: '近超期',
                    type: 'pictorialBar',
                    symbolPosition: 'end',
                    data: jinchaoqi_data,
                    symbol: 'diamond',
                    symbolSize: [15, 13], //盖子的大小
                    symbolOffset: ['70%', '-40%'],
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            x2: 1,
                            y: 0,
                            y2: 0,
                            colorStops: [
                                { offset: 0, color: 'rgba(220, 149, 251, 1)' },
                                { offset: 1, color: 'rgba(119, 62, 247, 1)' }
                            ]
                        }
                    },
                    tooltip: {
                        show: false
                    }
                },
                {
                    z: 1,
                    type: 'bar',
                    name: '近超期',
                    barWidth: barWidth,
                    // barGap: '-50%',
                    data: jinchaoqi_data,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            x2: 1,
                            y: 0,
                            y2: 0,
                            colorStops: [
                                { offset: 0, color: 'rgba(90, 45, 192, 1)' },
                                { offset: 0.5, color: 'rgba(184, 91, 225, 1)' },
                                { offset: 0.5, color: 'rgba(50, 13, 133, 1)' },
                                { offset: 1, color: 'rgba(90, 45, 192, 1)' }
                            ]
                        }
                    }
                },
            ]
        };



        // // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }