Echarts在线免费图表

 
            // 立体柱状图


const barWidth = 25;

option = {
    backgroundColor: '#182027',
    tooltip: {
        trigger: "item"
    },
    grid: {
        left: 80,
        right: 40,
        bottom: 100,
        top: 100,
        containLabel: true
    },
    xAxis: {
        data: ["1", "2", "3", "4", "5"],
        axisTick: {
            show: true
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(151, 151, 151, 0.3)'
            }
        },
        axisLabel: {
            color: '#fff',
            fontSize: 14,
            padding:15
        }
    },
    yAxis: {
        type: 'value',
        name: '（万元）',
        nameTextStyle: {
            color: "#fff",
            fontSize: 12,
            padding: [5, 0,20, -50],
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(151, 151, 151, 0.3)',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(151, 151, 151, 0.1)',
            },
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff',
            },
            padding:10
        },
    },
    series: [{
        z: 1,
        type: "bar",
        barWidth: barWidth,
                    label: {
                     show: true,
                     position: "top", //数值在上方显示
                     textStyle: {
                     //数值样式
                     color: "#fff",
                     fontWeight: "bold",
                     fontSize: 10 //字体大小
                     }
                  },
        data: [{
            value: 26.51,
            itemStyle: {
                normal: {
                    color: "#007500"
                }
            }
        },
        {
            value: 125.14,
            itemStyle: {
                normal: {
                    color: "#A8A800"
                }
            }
        },
        {
            value: 42.47,
            itemStyle: {
                normal: {
                    color: "#CCCCCC"
                }
            }
        },
        {
            value: 30,
            itemStyle: {
                normal: {
                    color: "#4E4E4E"
                }
            }
        },
        {
            value: 14.02,
            itemStyle: {
                normal: {
                    color: "#7D1E00"
                }
            }
        }
        ]
    },    
    ]
}