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换行的更多相关文章

  1. echart的tooltip自定义换行

    自定义换行,内容很长的时候 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直 ...

  2. echart的x轴换行

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. echart纵坐标标签特别长换行显示

    纵坐标 yAxis : [ { type : 'category', data : name, axisLabel: { //坐标轴刻度标签的相关设置. textStyle: { color: '#0 ...

  4. echart.js的使用与API

    ---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echar ...

  5. echart使用总结

    以下参数都是写在option配置对象内,没有提及的配置参数欢迎查阅读echart参考手册. 一. 修改主标题和副标题 title : { text: '未来一周气温变化',//写入主标题 subtex ...

  6. 图表库 - Highchart / Echart

    当前主要使用HighChart和Echart图表库,都基于Jquery,需要先引用Jquery. 实际问题:引入Jquery需在图表库前,否则报错. HighChart官网:https://www.h ...

  7. echart 库 初始

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

  8. SQL:指定名称查不到数据的衍伸~空格 换行符 回车符的批量处理

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 先看看啥情况 复制查询到的数据,粘贴一下看看啥情况 那就批量处理一下~ 就这样 ...

  9. EChart系列:在echart3中使用百度地图扩展之后,如何获取到百度地图对象

    最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...

随机推荐

  1. 解决ajax 跨域请求问题

    浏览器console报错: has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is 解决: 服务端加入代 ...

  2. iniReader,读取配置文件中数据

    #include ”IniOperation.h" CString strPath = strIntancePath + _T("..\\config.ini"); // ...

  3. MVC 向页面传值方式总结(2)

    MVC 向页面传值方式总结 总结发现ASP.NET MVC中Controller向View传值的方式共有6种,分别是: ViewBag ViewData TempData 向普通View页面传一个Mo ...

  4. 我了解到的新知识之----遇到路由器DNS被篡改我该怎么办?

    最近一则新闻让我不得不开始重视家中一直沉默在角落里路由器了. http://www.21ic.com/tougao/article/8346.html 于是立刻搜索了一些关于如何检查DNS地址是否被修 ...

  5. 自学stm32就要记住入了这个“大坑”要耐得住寂寞

    在现在的MCU使用量中,STM32绝对是翘楚!因为现在使用STM32开发产品的公司非常多,这主要得益于ST公司对自家MCU的大力推广,而且ST对自己MCU也配套了一系列开发软件,也有相应的硬件开发板供 ...

  6. Fiddler抓取数据并分析(完整的配置教程)

    一.Fiddler现在的移动应用程序几乎都会和网络打交道,所以在分析一个 app 的时候,如果可以抓取出其发出的数据包,将对分析程序的流程和逻辑有极大的帮助.对于HTTP包来说,已经有很多种分析的方法 ...

  7. Mac下StarUML的安装以及破解

    1.下载地址:http://staruml.io/ 2. 打开 /Applications/StarUML.app/Contents/www/license/node/LicenseManagerDo ...

  8. -webkit-box-orient: vertical; 在webpack上失效

    -webkit-box-orient: vertical;在webpack上失效,可以使用以下方式解决 .ifc-header-content-comment { text-overflow: ell ...

  9. linux安装elk

    环境: centOS7 JDK8 Elasticsearch-6.6.1 Logstash-6.6.1 Kibana-6.6.1 准备: jdk下载地址:https://www.oracle.com/ ...

  10. reactive stream: 响应式编程

    既然 Reactive Stream 和 Java 8 引入的 Stream 都叫做流,它们之间有什么关系呢?有一点关系,Java 8 的 Stream 主要关注在流的过滤,映射,合并,而  Reac ...