echart的x换行
option = {
legend: {
y: 'bottom',
data:['该业务正常类比例','该业务关注类比例','该业务不良类比例']
},
xAxis: {
type: 'category',
data: ['xx', 'xx', 'xxxxx', 'xxxxxx', 'xxxxxx', 'xxxxxxxxx'], //替换
//换行部分。。。。。
axisLabel:{
interval:0,
formatter:function(value){
var ret = '';
var maxLength = 4;
var rowNum = Math.ceil(value.length/maxLength);
if(rowNum > 1) {
for(var i = 0; i < rowNum; i++) {
var temp ="";
var start = i * maxLength;
var end = start + maxLength;
temp = value.substring(start,end) + "\n";
ret += temp;
}
return ret;
}else {
return value;
}
}
}
},
yAxis: [
{
name: '关注及损失',
type: 'value',
interval:1,
position:'left'
},
{
name: '正常',
type:'value',
interval:20,
position:'right'
},
],
series: [
{
name:'该业务正常类比例',
data: [2, 3, 3, 1, 2, 4], //替换
type: 'bar'
},
{
name:'该业务关注类比例',
data: [1, 2, 3, 4, 5, 6], //替换
type: 'bar'
},
{
name:'该业务不良类比例',
data: [99, 97, 97, 97, 97, 97],//替换
yAxisIndex:1,
type: 'line'
}
]
};
图:

echart的x换行的更多相关文章
- echart的tooltip自定义换行
自定义换行,内容很长的时候 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直 ...
- echart的x轴换行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- echart纵坐标标签特别长换行显示
纵坐标 yAxis : [ { type : 'category', data : name, axisLabel: { //坐标轴刻度标签的相关设置. textStyle: { color: '#0 ...
- echart.js的使用与API
---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echar ...
- echart使用总结
以下参数都是写在option配置对象内,没有提及的配置参数欢迎查阅读echart参考手册. 一. 修改主标题和副标题 title : { text: '未来一周气温变化',//写入主标题 subtex ...
- 图表库 - Highchart / Echart
当前主要使用HighChart和Echart图表库,都基于Jquery,需要先引用Jquery. 实际问题:引入Jquery需在图表库前,否则报错. HighChart官网:https://www.h ...
- echart 库 初始
一.echart简介 Echarts (http://echarts.baidu.com/)是百度公司出品的,算是百度不可多得的良心之作.要彻底掌握Echarts,你需要掌握一点前端开发的知识,这些知 ...
- SQL:指定名称查不到数据的衍伸~空格 换行符 回车符的批量处理
异常处理汇总-数据库系列 http://www.cnblogs.com/dunitian/p/4522990.html 先看看啥情况 复制查询到的数据,粘贴一下看看啥情况 那就批量处理一下~ 就这样 ...
- EChart系列:在echart3中使用百度地图扩展之后,如何获取到百度地图对象
最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...
随机推荐
- 《SpringMVC从入门到放肆》六、SpringMVC开发Controller的方法总结
到目前为止我们已经大概学习了StringMVC的执行流程,以及详细的处理器映射器和处理器适配器的执行流程,并可以自己写一个配置方式开发的小Demo了.今天我们来总结一下实现一个Controller的几 ...
- [LeetCode] Design HashSet 设计HashSet
Design a HashSet without using any built-in hash table libraries. To be specific, your design should ...
- c#中string的一些基本用法
.string的Split方法的使用 这个例子就是通过制定的符号来将词组分开,Splite(分割的字符,分割的份数) using System; using System.Collections; p ...
- 19.3.19 使用Flask框架搭建一个简易登录服务器
import Flask import json from Flask import request server1 = flask.Flask(__name__) #实例化一个flask对象 @se ...
- Jenkins调度Selenium脚本不能打开浏览器解决办法
前提:在Myeclipse里面可以启动起来浏览器,在Jenkins中不能启动浏览器 原因:以程序的方式安装了jenkins,jenkins就成了windows的一个服务了,默认是设置为自动启动的如下图 ...
- c#重命名文件,报错“System.NotSupportedException”类型的未经处理的异常在 mscorlib.dll 中发生”
修改远程服务器的文件名,报错“System.NotSupportedException”类型的未经处理的异常在 mscorlib.dll 中发生”,“System.NotSupportedExcept ...
- 【转载】Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
本文转载自脚本之家,源网址为:https://www.jb51.net/article/147429.htm 一.Python中日期时间模块datetime介绍 (一).datetime模块中包含如下 ...
- Libvmi实现分析
LibVMI是一个专注于读写虚拟机内存的自省库,它能够监视虚拟机底层的运行细节并将其还原.LibVMI支持对Xen及KVM虚拟化平台上的运行虚拟机进行自省操作,针对KVM虚拟化平台,LibVMI对QE ...
- springcloud第八步:hystrix解决服务雪崩
断路器(Hystrix) 为什么需要 Hystrix? 在微服务架构中,我们将业务拆分成一个个的服务,服务与服务之间可以相互调用(RPC).为了保证其高可用,单个服务又必须集群部署.由于网络原因或者自 ...
- opencart3修改产品页模板没有效果的原因排查
这几天在opencart 3模板时发生了一个很奇怪的事情,ytkah明明已经将product.twig模板修改了,但是前端产品页就是没有变化,后台刷新缓存了也不起左右.后面想着把模板重命名成produ ...