图表小结1

1、横向双方向双柱图
思路：两个series，将其一设置为负值，显示时显示正值即可。
问题：左右两侧由于存在最高柱大小差距较大的情况，会导致零点不在中间
处理方法：如有必要可多设置以个数据源，添加或正或负一个数据，通过设置颜色与样式使其隐藏，其绝对值为两侧柱中的最大值，从而控制正负轴的长度。

2、legend动态显示回调数据

legend: {
data:dataLegend,
formatter: function(name) {
var index = 0;
dataLegend.forEach(function(value, i) {
if (value == name) {
index = i;
}
});
return name + “总人数:” + dataCounts[index];
}
}
//name与dataCounts为前台接收到的数据
3、bootstrap中，后台bpo中传导的变量不需要使用其自带的row包装，直接传递一个json串即可。使用row包装会导致不显示行数的情况下前台不读数据。
4、ie浏览器无法点击一些按钮
解决方法：右键点击页面，看是否会弹出允许访问剪贴板提示。如果有弹出，选择允许，再点击按钮尝试打开。
Ps：设置允许访问剪贴板的位置在internet选项中安全页面自定义安全级别中。
又：似乎在未重启的情况下，很难彻底解决这个问题。
5、ie无法准确兼容echarts中很多标签，如containLabel。所以使用此标签的情况下有可能会导致图表在ie中无法加载到合适大小。不使用标签，仅通过其他如gird等常用标签控制即可避免此类问题。
6、echarts图表会由于自适应函数
window.addEventListener(“resize”, function () {
myChart.resize();
});
的原因导致图表在页面缩放后无法按比例缩小。原因是缩放的过程中，缩放div的速度慢于加载图表的速度。
解决方法：添加setTimeOut函数，时延保持在500~1000即可，即通过模拟异步回调的方式使加载图表晚于缩放div。但此方法会导致图表在页面缩放后出现一个明显的跳动式的放缩过程。
window.addEventListener(“resize”, function () {
setTimeout(myChart.resize(),800);
});
7、bootstrap中使用下列函数触发行点击事件。
$("#leftMainTable").on("click-row.bs.table",function(e, row,$element){
showData(row.jblb);
});
使用showData将数据传给其他函数。
function showData(id){
var jbName = id;
jblb = jbName;
setRightTop();
}//提前定义一个全局变量jblb
另：如果仅想让表格的点击事件触发在行列中的文字上，在formatter中function函数的return值中添加onclick事件即可。
Echarts图表的点击事件可以通过以下代码实现。
myChart.on(‘click’, showData);