Echarts实现立体柱形图

最新推荐文章于 2025-07-11 09:14:17 发布

原创

最新推荐文章于 2025-07-11 09:14:17 发布 · 239 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #echarts

效果图：

代码：

var barWidth = 40;
var symbolSize = [barWidth, 20];
var symbolOffsetT = [0, -10]; //修改绿色柱子头部椭圆位置
var symbolOffsetB = [0, 10]; //修改绿色柱子底部椭圆位置
var normalColor = "#94a1a9";
var fontSize = 20;
var datas = {
    xdata: ['2016', '2017', '2018', '2019'],
    yData1: [4200, 2220, 3910, 5340],
    yData2: [3100, 2120, 3610, 5140],
    legendData: ['aaa', 'bbb'],
}
option = {
    animation: false, //去除加载时缓动动画
    legend: {
        show: true,
        selectedMode: false, //取消图例上的点击事件
        data: datas.legendData
    },
    xAxis: {
        axisLine: {
            lineStyle: {
                color: normalColor
            }
        },
        axisTick: {
            "show": false
        },
        axisLabel: {
            textStyle: {
                color: normalColor,
                fontSize: f