目前在改别人遗留的bug,需求:

宽度 自适应的情况下 展示不友好:宽度太大

上下不居中 需求 要 上下 无论是否 有内容 都要居中展示 以0刻度为标准

宽度 设置

	series: [
{
name: '已付金额',
type: 'bar',
stack: 'one',
color:'#7198d2',
itemStyle: itemStylet,
barCategoryGap:10,
data: data1,
barWidth:15 宽度15规定
},
{
name: '未付金额',
type: 'bar',
stack: 'one',
color:'#f09266',
itemStyle: itemStylett,
barCategoryGap:10,
data: data2
}
]

  

高度调整

原理:给 y轴 设置 最大值 ,最小值,最大值和最小值 为 数据中 最大值的绝对值  这样 canvas就会基于 0刻度线居中

		yAxis: {
axisLabel:{
formatter:function (value, index) {
if(value<0){
return -value;
}else{
return value;
}
}
},
min:-getMaxMin(data1,data2),
max:getMaxMin(data1,data2)
},

  

var data1 = [400,400,400,400];
var data2 = [-400,-6000,-600,-1000,];
	var num=0;
function getAbcArr(data2) {
var arr=[];
$.each(data2,function (i, v) {
arr.push(Math.abs(v))
})
return arr
}
function getMaxMin(data1, data2) {
var arr=data1.concat(getAbcArr(data2));
return Math.max.apply(null,arr)
}
getMaxMin(data1,data2)

  


最后的效果图

 

新bug ,明明没有设置最后一个x轴加粗,显示出来就是加粗了

后来检查 发现时 这里的问题

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

  

由于字体比较多 所以对x轴显示 做了一些 配置 而interval:0导致了 这个bug

这里 把这个直接注释 就可以解决,默认都显示。

echart-柱状图的更多相关文章

  1. echart 柱状图 两个纵轴坐标 刻度不一样

    在使用echart的过程中, 有的时候柱状图会使用两个纵坐标, 如果两个纵坐标的最大值是一样的还好,这样刻度也会一样. 但是多数情况下最大值是不一样的, 这样就造成了,刻度线很乱,显示不均匀. 解决办 ...

  2. vue中使用echart柱状图

    一: <template> <Layout> <Content> <Card :style="{minHeight:'300px'}"&g ...

  3. IVIEW组件Table中加入EChart柱状图

    展示图如下: 主要利用了render函数和updated()钩子函数进行数据填充与渲染. 1.在Table的Colums中加入 1 { 2 title: '比例图', 3 align: 'center ...

  4. echart 柱状图X轴显示不全

    z要设置interval为0就可以了 xAxis: [ { type: "category", boundaryGap: false, data: [], axisLine: { ...

  5. echart 柱状图背景色设置

    方法一: series: [ { name: '1', type: 'bar', itemStyle: {//柱图背景色 color: '#111' }, data: list }, { name: ...

  6. echart 库 初始

    一.echart简介 Echarts (http://echarts.baidu.com/)是百度公司出品的,算是百度不可多得的良心之作.要彻底掌握Echarts,你需要掌握一点前端开发的知识,这些知 ...

  7. Ueditor文字和echarts图片 生成 word 前端解决方案

    编程就像搭积木,少了任何一个就拼接不起来,所有积木都找到就只剩下调试. 一.echarts  获取图片方法getDataURL  详细配置:https://www.echartsjs.com/zh/a ...

  8. echart折线图,柱状图,饼图设置颜色

    转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category ...

  9. 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)

    最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...

  10. echart 折线图、柱状图、饼图、环形图颜色修改

    之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...

随机推荐

  1. WebService安全解决方案—简单握手协议

    具体方案如下图: 2.解决方案分析 A.SiteA每次向SiteB发送的请求参数都不一样,造成伪造者难以模仿和推敲里面的算法过程. B.伪造者获得了SayHelloRequest的数据,它向SiteB ...

  2. Table View Programming Guide for iOS---(四)---Navigating a Data Hierarchy with Table Views

    Navigating a Data Hierarchy with Table Views 导航数据表视图层次 A common use of table views—and one to which ...

  3. git提交历史不显示自己账户的问题

    其实这个问题本身也不大好描述.还是上图好了 问题就如同途中倒数第二次提交.明明就是我提交的,却不显示我的账号.个人页面也不反映这次提交.   后来发现问题所在,要想正确显示,必须要把对这个项目的邮箱设 ...

  4. python 类属性和实例属性、方法 访问权限问题

    class Animal: cls_attr = 'cls_attr' _cls_attr = '_cls_attr' __cls_attr = '__cls_attr' def __init__(s ...

  5. tpframe免费开源框架又一重大更新

    tpframe在为Pc站.app接口.微信mobile站各种功能完善的基础上,又更新了一项重新的更新突破,以后你用tpframe开发网站,不须要在写那么多繁琐的依赖程序了,现在只须要写你关注的程序模块 ...

  6. 黑客攻防技术宝典web实战篇:攻击验证机制习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 在测试一个使用joe和pass证书登录的Web应用程序的过程中,在登录阶段,在拦截代理服务 ...

  7. the little schemer 笔记(0)

    the little schemer 笔记 Z.X.L 2012年08月13日 五项规则 car的规则car只对非空列表有定义. cdr的规则cdr只对非空列表有定义.任何非空列表的cdr是另外一个列 ...

  8. 使用c++的一些建议

    1: 不要使用宏,用const或enum定义常量 用inline避免函数的额外调用(使用inline的函数,块里面尽量不要使用循环和递归) 用template去荷花一些函数或者类型 用namespac ...

  9. compose 函数实现

    总结componse函数实现过程 大致特点 参数均为函数, 返回值也是函数 第一函数接受参数, 其他函数接受的上一个函数的返回值 第一个函数的参数是多元的, 其他函数的一元的 自右向左执行 简单实现 ...

  10. jsp问题记录

    2014-10-10 20:53:16 Jsp的el表达式:‘${value}’  用于获取后台传过来的值 而<%=value %>则是获取当前页面java代码的值