echart-柱状图
目前在改别人遗留的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-柱状图的更多相关文章
- echart 柱状图 两个纵轴坐标 刻度不一样
在使用echart的过程中, 有的时候柱状图会使用两个纵坐标, 如果两个纵坐标的最大值是一样的还好,这样刻度也会一样. 但是多数情况下最大值是不一样的, 这样就造成了,刻度线很乱,显示不均匀. 解决办 ...
- vue中使用echart柱状图
一: <template> <Layout> <Content> <Card :style="{minHeight:'300px'}"&g ...
- IVIEW组件Table中加入EChart柱状图
展示图如下: 主要利用了render函数和updated()钩子函数进行数据填充与渲染. 1.在Table的Colums中加入 1 { 2 title: '比例图', 3 align: 'center ...
- echart 柱状图X轴显示不全
z要设置interval为0就可以了 xAxis: [ { type: "category", boundaryGap: false, data: [], axisLine: { ...
- echart 柱状图背景色设置
方法一: series: [ { name: '1', type: 'bar', itemStyle: {//柱图背景色 color: '#111' }, data: list }, { name: ...
- echart 库 初始
一.echart简介 Echarts (http://echarts.baidu.com/)是百度公司出品的,算是百度不可多得的良心之作.要彻底掌握Echarts,你需要掌握一点前端开发的知识,这些知 ...
- Ueditor文字和echarts图片 生成 word 前端解决方案
编程就像搭积木,少了任何一个就拼接不起来,所有积木都找到就只剩下调试. 一.echarts 获取图片方法getDataURL 详细配置:https://www.echartsjs.com/zh/a ...
- echart折线图,柱状图,饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category ...
- 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)
最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...
- echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...
随机推荐
- apache禁止使用IP访问的实现方法
apache禁止访问目录列表 apache禁止访问目录列表对于开发人员来说还是蛮实用的,可以迅速查找根目录下的所有项目,但如果一个挂在互联网上的服务器为了提高安全性就必须禁止访问目录列表. 找到Apa ...
- Spring Boot 学习系列(序)—Spring Boot
此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Spring Boot? Spring Boot 是由pivotal团队提供的一个基于Spring的全新框架 ...
- PaaS服务之路漫谈(二)
此文已由作者尧飘海授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 天下大势,分久必合,合久必分,社会历史的发展方向总有着惊人的相似.把这种规律应用到软件应用架构的发展方向上, ...
- BestCoder Round #74 (div.1) 1002Shortest Path(hdoj5636)
哈哈哈哈,我就知道这道题目再扔给我,我还是不会,就是这么菜,哈哈哈 一开始官方题解就没搞懂-然后就看了一下别人的代码,水水过就算了.今天拿到-GG: 题意: 一开始,有一张原图,有一条长度为n的链. ...
- 洛谷P3537 [POI2012]SZA-Cloakroom(背包)
传送门 蠢了……还以为背包只能用来维护方案数呢……没想到背包这么神奇…… 我们用$dp[i]$表示当$c$的和为$i$时,所有的方案中使得最小的$b$最大时最小的$b$是多少 然后把所有的点按照$a$ ...
- JZOJ4307. 【NOIP2015模拟11.3晚】喝喝喝
Description
- influxdb数据库的安装部署(windows)二
1.把下载好的文件解压到目录中 2.以管理员身份运行cmd进入influxdb-1.7.6-1文件夹 3.生成influxdb数据的默认配置Config文件 4.修改Config配置信息 5.用配置好 ...
- CH 6021 走廊泼水节
描述 [简化版题意]给定一棵N个节点的树,要求增加若干条边,把这棵树扩充为完全图,并满足图的唯一最小生成树仍然是这棵树.求增加的边的权值总和最小是多少. 我们一共有N个OIER打算参加这个泼水节,同时 ...
- net 上传视频
[HttpPost] public ActionResult MultiUpload() { System.Web.HttpFileCollectio ...
- 洛谷 P2158 [SDOI2008]仪仗队 && 洛谷 P1447 [NOI2010]能量采集
https://www.luogu.org/problemnew/show/P2158 以人所在位置为(0,0)建立坐标系, 显然除了(0,1)和(1,0)外,可以只在坐标(x,y)的gcd(x,y) ...