欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

暴力解决echarts柱状图宽度不能更改问题

程序员文章站 2022-05-24 18:06:15
...

安装

cnpm install echarts -S   (安装依赖并引入到 package.json)

引入

import echarts from 'echarts'

用法:
将条形图放在div里面,最好设置宽度为100%,下面会说到原因。

<div id="myChart" :style="{width: '100%', height: '500px'}"></div>
drawLine(state) {
            // 基于准备好的dom,初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: {
                    text: moment(state.queryFilter.date).format('YYYY-MM-DD')+'省份日报表',
                    left:'center'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                        type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                    }
                },
                legend: {
                    left: '2%',
                    padding: 5,
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '20%',
                    scontainLabel: true
                },
                xAxis: [
                    {
                        boundaryGap: true,//默认true,这时刻度只是作为分隔线,标签和数据点都会在两个刻度之间。
                        type: 'category',
                        minInterval: 1,//自动计算的坐标轴最小间隔大小。
                        data: state.queryFilter.x,//x轴要显示的数据
                        axisTick: {
                            alignWithLabel: true
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value'

                    }
                ],
                series: [
                    {
                        name: '打单量',
                        type: 'bar',
                        barWidth: '50%',
                        data: state.queryFilter.y,//y轴要显示的数据
                        // barCategoryGap: '1%'
                    }
                ],
            });
        }

如果不指定div宽度,那么经过数据填充,一个echarts柱状图迎面而来。问题来了,文字显示不全。
暴力解决echarts柱状图宽度不能更改问题
那么,指定宽度将div拉长?嗯,终于文字能对应显示了,问题又来了,好一个“犹抱琵琶半遮面”。
暴力解决echarts柱状图宽度不能更改问题

这个大坑。。。我甚至试过在数据填充的时候用空数组来填充。(我靠,算法就该这么玩!)没毛病,但是毕竟来公司第一个上手项目,余心有不甘,遂继续探索。

有人可能会说,官方文档不是说了barGap“柱间距离,可设固定值(如 20)或者百分比(如 ‘30%’,表示柱子宽度的 30%)。”
可惜,这玩意儿不是“单身狗”拥有的属性。就是说只有当双柱状图才可使用(就是一组两个条,两种颜色相拥在一起那种)。

先把div宽度指定为100%再说。后来看文档发现有几个比较好的玩意儿来操作x轴:

xAxis下:

axisLabel: {
        interval: 0,// 0 强制显示所有,1为隔一个标签显示一个标签,2为隔两个
        rotate: 45,//标签旋转角度,在标签显示不下的时可通过旋转防止重叠
        textStyle: {
            fontSize: 15,//字体大小
        }
      }

还有就是xAxis下有两个属性:

boundaryGap: true,//默认true,此时刻度作为分隔线,标签与数据点在两个刻度间显示

minInterval: 1,//默认0,设置成1保证坐标轴分割刻度显示成整数。

最后终于完美展示:
暴力解决echarts柱状图宽度不能更改问题

echarts的柱子之间宽度是不能调!不能调!!不能调!!!