ts 正负条形图 组件_echart插件--柱状图正负柱使用配置

一、bug记录：

1.yAxis中 boundaryGap:false, //坐标轴两边留白策略这个参数设置false时  表示柱状图和坐标轴无缝衔接，会出现当鼠标放在最下面和最上面的两个柱状图时，柱状图隐藏的状态，不知道为啥，但是就是这个配置导致的，删掉或者true就好了。

2.echart中toolTip是div   设置的层级z-index:9999999;所以自定义弹窗要记得设置z-index要大于toolTip的层级。

二、使用过程中配置的使用记录：

1.设置柱状图和y轴有一定的距离，如下图所示柱状图与Y轴距离太近

解决：xAxis：{boundaryGap:true,}//是否与坐标轴之间留白  默认是true  当时解决多列title显示不全的时候设置了false  导致问题出现，改成false即可。

下面X轴文字想要调整与y轴的距离：textStyle: {padding:[0,0,0,20]}  设置padding的值就可以了准寻上右下左的规律

2，标签过多显示不全的问题：

方法a:文字倾斜

axisLabel: {//解决标签过多显示不全

interval:0,rotate:30,

}

方法2：文字竖排显示

axisLabel: {

interval: 0,

formatter:function(value)

{

returnvalue.split("").join("\n");

}

},

3.正负柱显示单位时要和x轴显示位置一致，如上图所示

解决：

xAxis: {

type : 'category',

name:"/月",

nameLocation:"middle",

nameGap:-10, //组合起来控制name的位置

nameTextStyle:{

//定位坐标轴名称位置，获取当前echart的div的宽度减去合理的值

padding:[0,0,0,$("#year_revenue_echart").width()-80]

},

}

相对完整的代码如下所示

1.需求实现图&#x