1. option = {
  2. legend: {
  3. y: 'bottom',
  4. data:['该业务正常类比例','该业务关注类比例','该业务不良类比例']
  5. },
  6. xAxis: {
  7. type: 'category',
  8. data: ['xx', 'xx', 'xxxxx', 'xxxxxx', 'xxxxxx', 'xxxxxxxxx'], //替换
  9.  
  10.      //换行部分。。。。。
  11. axisLabel:{
  12. interval:0,
  13. formatter:function(value){
  14. var ret = '';
  15. var maxLength = 4;
  16. var rowNum = Math.ceil(value.length/maxLength);
  17. if(rowNum > 1) {
  18. for(var i = 0; i < rowNum; i++) {
  19. var temp ="";
  20. var start = i * maxLength;
  21. var end = start + maxLength;
  22. temp = value.substring(start,end) + "\n";
  23. ret += temp;
  24. }
  25. return ret;
  26. }else {
  27. return value;
  28. }
  29. }
  30. }
  31. },
  32. yAxis: [
  33. {
  34. name: '关注及损失',
  35. type: 'value',
  36. interval:1,
  37. position:'left'
  38. },
  39. {
  40. name: '正常',
  41. type:'value',
  42. interval:20,
  43. position:'right'
  44. },
  45.  
  46. ],
  47. series: [
  48. {
  49. name:'该业务正常类比例',
  50. data: [2, 3, 3, 1, 2, 4], //替换
  51. type: 'bar'
  52. },
  53. {
  54. name:'该业务关注类比例',
  55. data: [1, 2, 3, 4, 5, 6], //替换
  56. type: 'bar'
  57. },
  58. {
  59. name:'该业务不良类比例',
  60. data: [99, 97, 97, 97, 97, 97],//替换
  61. yAxisIndex:1,
  62. type: 'line'
  63. }
  64.  
  65. ]
  66. };

  图:

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. react_app 项目开发 (7)_难点集合

    /src/App/Admin/Header 布局 import {Row, Col} from "antd" <div className="header_box& ...

  2. Hibernate--Day01

    Hibernate是一个面向对象的持久化框架 持久化: 1,把内存中的Java对象保存到存储设备上面: 2,最好的解诀方案:把对象持久化到数据库里面: 3, 在Java里面,把对象持久化到数据库只能使 ...

  3. 微信小程序采坑

    wx.request() complete回调函数执行时机问题 代码执行顺序有时候会严重影响用户体验:比如项目中请求数据时显示loading的图标,请求完成后不管失败还是成功都要把loading图标隐 ...

  4. Thymeleaf常用th标签

    https://www.jianshu.com/p/f9ebd23e8da4 关键字 功能介绍 案例 th:id 替换id <input th:id="'xxx' + ${collec ...

  5. laravel整合workerman做聊天室

    测试工具  http://www.blue-zero.com/WebSocket/ 2018年8月6日17:28:24 <?php namespace App\Console\Commands; ...

  6. 随笔二-https://www.cnblogs.com/shang1680/p/9657994.html

    作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 GitHub远程仓库的地址:https://github.com/ ...

  7. [emacs] emacs设置python code的indent

    装python-mode的包 https://gitlab.com/python-mode-devs/python-mode/tree/master python-mode emacswiki文档 e ...

  8. su: authentication failure 解决方法

    在Linux上切换root时,密码正确..但提示:su: authentication failure ->sudo passwd ->Password:你当前的密码 ->Enter ...

  9. VUE-010-通过声明式导航 router-link 传递 params 参数(路由 name 识别,请求链接不显示参数传递)

    在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,除了通过路由进行表单参数的传递,也可通过声明式导航 router-link 进行页面跳转和参数传递. 首先,配置页面跳转路由 ...

  10. python 判断字符串是否为(或包含)IP地址

    下面是某个字符串是否为IP地址import re def isIP(str): p = re.compile('^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5 ...