ECharts柱状堆积求和——解决方案

度娘找了一个小时,没有一个解决方案,都是一些过时的方法。
ECharts版本:3.6.2
方法:
配置项:series.barGap
说明:
柱间距离,可设固定值(如 20)或者百分比(如 ‘30%’,表示柱子宽度的 30%)。
如果想要两个系列的柱子重叠,可以设置 barGap 为 ‘-100%’。这在用柱子做背景的时候有用。
在同一坐标系上,此属性会被多个 ‘bar’ 系列共享。此属性应设置于此坐标系中最后一个 ‘bar’ 系列上才会生效,并且是对此坐标系中所有 ‘bar’ 系列生效。

思路来源:http://gallery.echartsjs.com/editor.html?c=xBkSx1lSfW

结果展示:
ECharts柱状堆积求和展示

解决方案:

 <script type="text/javascript">
            var UName = ['张晨威','李锋锐','谢海青'];
            var WeiNum = [41,42,35];
            var WuNum = [77,74,112];
            var DaiNum = [2,1,3];
            var CNum = [0,3,0];
            var BNum = [0,0,0];
            var ANum = [0,0,0];
            var JiNum = [0,0,0];
            var totalNum =[120,120,150];
            console.log(totalNum);
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            legend: {
                data: ['未接','无意向','待定','意向C','意向B','意向A']

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'category',
                data: UName
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '总和',
                    type: 'bar',
                    barGap: '-100%',
                    label: {
                        normal: {
                            textStyle: {
                                color: '#682d19'
                            },
                            position: 'left',
                            show: false,
                            formatter: '{b}'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#E5F9FB',
                            borderWidth: 2,
                            borderColor: '#1FBCD2'

                        }
                    },
                    data:totalNum
                },
                {
                    name: '无意向',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }

                    },
                    data: WuNum
                },
                {
                    name: '未接',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: WeiNum
                },
                {
                    name: '待定',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: DaiNum
                },
                {
                    name: '意向C',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: CNum
                },
                {
                    name: '意向B',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: BNum
                },
                {
                    name: '意向A',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: ANum
                },
                {
                    name: '即将成交',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: JiNum
                },

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值