echarts生成三维柱状图

这里介绍下如何生成三维的柱状图,例如,按照月份展示两个产品在2010年和2011年的统计数量,这里x轴标识月份,一根柱子代表一年的几个产品,这里是两年两个产品的示例,多个年数或产品同样的方法,不在赘述。

以下是核心代码部分,主要利用了堆叠柱状图的思想,然后再通过stack属性对产品进行分类,最后再format tooltips展示

option = {
    tooltip: {
        trigger: 'axis',
       formatter: function (params,ticket,callback) {
            // console.log(params)
            var res = '2010年' + params[0].name + ':';
            var res1 = '<br/>2011年' + params[0].name+ ':';
            for (var i = 0, l = params.length; i < l; i++) {
                if(i === 2) {
                    res += res1 + '<br/>' + params[i].seriesName + ' : ' + params[i].value
                } else {
                  res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                }
            }
            // console.log(res)
            return res;
        }
    },
    legend: {
        data: ['产品一', '产品二']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
       {
        name: '产品一',
        stack: '2010',
        type: 'bar',
        data: [320, 332, 301, 334, 390, 330, 320,120, 132, 101, 134, 290, 230, 220]
      },
      {
        name: '产品二',
        stack: '2010',
        type: 'bar',
        data: [220, 182, 191, 234, 290, 330, 310,62, 82, 91, 84, 109, 110, 120]
      },
      {
        name: '产品一',
        stack: '2011',
        type: 'bar',
        data: [120, 132, 101, 134, 290, 230, 220,320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '产品二',
        stack: '2011',
        type: 'bar',
        data: [62, 82, 91, 84, 109, 110, 120,220, 182, 191, 234, 290, 330, 310]
      }    
    ]
};

小伙伴如果有疑问可以第一时间评论或留言,看到后也会及时回复的,有帮助的麻烦动动手指点个赞哟!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值