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

实现效果如图所示：

代码展示

   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();
        });
    }复制

重点部分：

对于柱状图颜色的设置：
(1): 其中柱状图的最上方的斜边形设置为type:‘pictorialBar’,
symbol: ‘diamond’, 菱形
symbolPosition: ‘end’,
(2):对于柱状图本身的设置 type: ‘bar’,