EChar中的柱状图如何设置柱子的最大宽度和刻度的最小间隔

刻度的最小间隔"/>

EChar中的柱状图如何设置柱子的最大宽度和刻度的最小间隔

现在在开发一个Echar的柱状图。遇到了几个问题，搜索了半天才弄好，写下来供后来人参考：

问题1：柱子的颜色要各种颜色，而不是同一种颜色；

问题2：在柱子数量少的时候，剩下的柱子不要太粗，否则不好看；

问题3：实际上的统计信息，其数据都是整数，没有小数。所以希望图形中的刻度也不要出现小数；

问题4：如果窗口大小变化，图表可以自动进行调整；

为了解决上面的四个问题，我对Echar进行了如下的设置：

            var curChart = echarts.init(document.getElementById(showDivId));
            // 初始化report对象
            curChart.setOption({
                    title: {
                        subtext: '单位:个',
                        subtextStyle: {
                            "fontSize": 13,
                            "fontWeight": 'bolder',
                            "color": "#000000"
                        },
                        x: 'right',
                        y: 'top',
                    },
                    tooltip: {
                        trigger: 'item',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 1],
                        min:0,
                        minInterval: 1 //解决问题3：实际上的统计信息，其数据都是整数，没有小数。所以希望图形中的刻度也不要出现小数；
                    },
                    yAxis: {
                        type: 'category',
                        data:[]
                    },
                    series: [
                        {
                            type: 'bar',
                            barMaxWidth: '50',  //解决问题2：在柱子数量少的时候，剩下的柱子不要太粗，否则不好看；
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        // build a color map as your need.

//解决问题1：柱子的颜色要各种颜色，而不是同一种颜色；
                                        var colorList = [
                                          '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                           '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                           '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            data: []
                        }
                    ]
            });
            //根据窗口大小调整图表
            window.onresize = curChart.resize; //解决问题4：如果窗口大小变化，图表可以自动进行调整；

供大家参考