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

来源：互联网发布：淘宝助理使用编辑：程序博客网时间：2024/06/05 08:23

度娘找了一个小时，没有一个解决方案，都是一些过时的方法。
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 0