3D柱状图百分比echarts 1配置项内容和展示

多个柱子的百分比

      var data = 60; //百分比
var b = 80;
var c = 85;
option = {
    backgroundColor: '#000E1A',
    tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0,0,0,0.5)',
        borderColor: 'rgba(89,211,255,1)',
        borderWidth: 2,
        padding: 5,
        textStyle: {
            color: "rgba(89,211,255,1)",
            fontSize: 18,
            width: 300,
            height: 40,
        },
        formatter: '{c}' + '%',


        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'

        // 自定义的 CSS 样式
    },
    grid: {
        bottom: "10%",
        top: "35%",
    },
    xAxis: {
        data: ["英语成绩优秀率", "数学成绩优秀率", "语文成绩优秀率"],
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff'
            },
             margin: 30, //刻度标签与轴线之间的距离。
        }
    },
    yAxis: {
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    series: [

        // 头
        {
            name: "",
            type: "pictorialBar",
            symbolSize: [150, 45],
            symbolOffset: [0, -20],
            z: 12,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [{
                                offset: 0,
                                color: "rgba(54,127,223,1)"
                            },
                            {
                                offset: 1,
                                color: "rgba(94,162,254,1)"
                            }
                        ],
                        false
                    ),
                }
            },
            data: [{
                name: "",
                value: 100,
                symbolPosition: "end",
             
            }, {
                name: "",
                value: 100,
                symbolPosition: "end",
            
            }, {
                name: "",
                value: 100,
                symbolPosition: "end",
          
            }]
        },


        //底部立体柱
        {
            name: "vvvv",
            stack: '1',
            type: 'bar',
         
            // label: {
            //     show: true,
            //     position: 'top',  //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
            //     distance: 15,
            //     color: "#FFFE00",
            //     fontSize: 30,
            //     formatter: '{c}' + '%'
            // },

            silent: true,
            barWidth: 150,
            barGap: '-100%', // Make series be overlap
            data: [{
                value: data
            }, {
                value: b
            }, {
                value: c
            }],
            itemStyle: {
                normal: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: "linear",
                        global: false,
                        colorStops: [{ //第一节下面
                            offset: 0,
                            color: "rgba(0,255,245,0.5)"
                        }, {
                            offset: 1,
                            color: "#43bafe"
                        }]
                    }
                }
            }
        },
        //三个最低下的圆片
        {
            name: "",
            type: "pictorialBar",
            symbolSize: [150, 30],
            symbolOffset: [0, 16],
            z: 12,
            itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "rgba(89,211,255,1)"
                            },
                            {
                                offset: 1,
                                color: "rgba(23,237,194,1)"
                            }
                        ])
                    }
                },
            data: [{
                name: "",
                value: "100",
                
            }, {
                name: "",
                value: "100",
           
            }, {
                name: "",
                value: "100",
            
            }]
        },
        // 中间圆片
        {
            name: "",
            type: "pictorialBar",
            symbolSize: [150, 42],
            symbolOffset: [0, -20],
             itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                            [{
                                    offset: 0,
                                    color: "rgba(89,211,255,1)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(23,237,194,1)"
                                }
                            ],
                            false
                        ),
                    }
                },
            z: 12,
            data: [{
                name: "",
                value: data,
                symbolPosition: "end",
               
            }, {
                name: "",
                value: b,
                symbolPosition: "end",
              
            }, {
                name: "",
                value: c,
                symbolPosition: "end",
               
            }]
        },
        //上部立体柱
        {
            //上部立体柱
            stack: '1',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#3E8BE6',
                    opacity: .7
                }
            },
            label: {
                show: true,
                position: 'top',  //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
                distance: 20,
                color: "#FFFE00",
                fontSize: 30,
                formatter: function(item){
                    var a=100
                    return a-item.value+'%'
                }
            },
            silent: true,
            barWidth: 150,
            barGap: '-100%', // Make series be overlap
            data: [{
                name: "a",
                value: 100 - data
            }, {
                name: "b",
                value: 100 - b
            }, {
                name: "c",
                value: 100 - c
            }]
        }
    ]
};