漏刻有时数据可视化Echarts组件开发(9):带渐变色的立体圆柱状图

    var dataName = ["优秀人数", "良好人数", "及格人数"];
    var dataList = [300, 500, 470];
    var myChart = echarts.init(document.getElementById("container"));
    var option = {
   
        backgroundColor: '#0e202d',
        grid: {
   
            "top": 200,
            "bottom": 150
        },
        tooltip: {
   },
        xAxis: {
   
            data: dataName,
            axisTick: {
   
                "show": false
            },
            "axisLine": {
   
                "show": false
            },
            "axisLabel": {
   
                interval: 0,
                textStyle: {
   
                    color: '#beceff',
                    fontSize: 20,
                },
                margin: 80,
            }
        },
        yAxis: {
   
            "splitLine": {
   
                "show": false
            },
            axisTick: {
   
                "show": false
            },
            "axisLine": {
   
                "show": false
            },
            "axisLabel": {
   
                "show": false
            }
        },
        series: [{
   
            name: "",
            type: "pictorialBar",
            symbolSize: [100, 45],
            symbolOffset: [0, -20],
            z: 12,
            data: [{
   
                name: dataName[0],
                value: dataList[0],
                trueVal: "98",
                symbolPosition: "end",
                itemStyle: {
   
                    color: "#00fff5"  //圆柱顶部颜色
                }
            }, {
   
                name: dataName[1],
                value: dataList[1],
                trueVal