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:如果窗口大小变化,图表可以自动进行调整;


供大家参考

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值