一:关于title与legend重叠

  1.重合样子

    

  2.解决办法:

    legend:{

      show: true,

      top:"6%",//与上方的距离 可百分比% 可像素px

    },

  3.解决后样子:

    


二:关于dataZoom数据区域缩放组件宽高调整

  1.原来样子:

    

  2.解决办法:

    dataZoom: [

      {
        height:"15px",//高度设置,另外还有宽度

        width:"100%",

      }]

  3.调整后:

    


三:关于显示数据到柱状图

  1.显示前:

    

  2.解决方法:  

    series : [
      {
        name: yTitle[i],
        type:echartsType[i],
        itemStyle:{
          normal:{
            label: {
              show: true,//是否在图上展示数据
              // position:'top',//数据在柱状图顶部显示
              textStyle:{
                color:'#000000' //数据颜色
              },
              formatter: '{c}' //显示百分比
             }
            },
     }],

  3.显示后

    


四:关于y轴值太大,在移动端被遮挡而显示不全。

  1.遮挡样子:

    

  2.解决办法:

    yAxis : [{

      type : 'value',
      axisTick: {
        inside: true
      },
      scale: true,
      axisLabel: {
        margin: 2,
        formatter: function (value, index) {  //主要调整部分
          if (value >= 10000 && value < 10000000) {
            value = value / 10000 + "万";
          } else if (value >= 10000000) {
            value = value / 10000000 + "千万";
          }
          return value;
        }
       },
      "splitLine": {//网格线 默认true
        "show": true
      }
    }],

  3.解决后:

    

  4.相关知识点

    yAxis.axisLabel.margin:刻度标签与轴线之间的距离。默认值是8,可以改小一点。不过本来的值已经很小了,这个没多大作用。
    yAxis.axisLabel.formatter:刻度标签的内容格式器,支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。
    grid.left:grid 组件离容器左侧的距离。默认值是10%。grid.right是距离右侧的距离,grid.top距离顶部的距离.grid.bottom距离底部的距离。

  


五:关于柱状图hover阴影显示与否

   1.显示效果

      

   2.相关知识点        

    xAxis: [
      {
        name:"小时",
        type: 'category',
        data: newXtitle,
        // axisPointer: {
         // type: 'shadow'  //显示柱状图阴影  注释掉之后就不显示阴影  默认是直线指示器line
        //}
      }
    ],

   3.不显示阴影之后

    

       4.相关知识点

      


六:关于鼠标悬停提示框超出图表范围

    1.超出范围

      

    2.解决办法

     tooltip : {

      confine: true

     },

    3.解决后

      

    4.相关知识点

      

      默认:[ default: false ]

      是否将 tooltip 框限制在图表的区域内。

      当图表外层的 dom 被设置为 'overflow: hidden',或者移动端窄屏,导致 tooltip 超出外界被截断时,此配置比较有用。


七: 关于x轴标签显示问题

    1.显示所有标签

      

    2.相关知识点

      axisLabel: { 

        interval:0,  //强制显示所有标签 设置为1则 隔一个标签,显示一个标签
        rotate: 40,  //文字倾斜角度

      }

    3.隔个显示

      


八: 

      

PS:都是一些小细节方面的东西,以后再遇到了就继续来添加。

echarts的title和legend重合解决(各种小细节)的更多相关文章

  1. 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的

    解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...

  2. 解决微信小程序登录与发布的一些问题

    解决微信小程序的问题 图片在电脑上显示但在手机上却无法显示的问题 要使用的是本地图片,不想把图片上传到网络再通过https的方式解决,解决方法如下: 1.image src中的图片地址对英文字母大小写 ...

  3. 解决微信小程序用 SpringMVC 处理http post时请求报415错误

    解决微信小程序用 SpringMVC 处理http post时请求返回415错误 写微信小程序时遇到的问题,这个坑硬是让我整了半天 wx.request请求跟ajax类似处理方法一致 小程序端请求代码 ...

  4. ueditor的工具栏显示乱码解决方法 小问题.. 是你的页面编码与语言包js编码不符所导致的

    ueditor的工具栏显示乱码解决方法 小问题..  是你的页面编码与语言包js编码不符所导致的解决方法:用记事本将ueditor\..\lang\zh-cn\zh-cn.js打开,然后保存为ANSI ...

  5. 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入

    如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...

  6. 一招解决微信小程序中的H5缓存问题

    一招解决微信小程序中的H5缓存问题1.问题描述开发过程中,为了更新代码方便,往往会在小程序中嵌入H5页面.但问题来了,小程序原生代码更新版本后,简单的从微信中删除或者代码强刷就可以解决缓存问题,但小程 ...

  7. Django+Xadmin+Echarts动态获取数据legend颜色显示灰色问题已解决

    前段时间做的使用Django的Xadmin后台和百度Echarts进行后台数据可视化,功能虽然实现,展示出来的legend图例,都是灰色的,只有鼠标放上去才会显示彩色的.百度都快被我刨穿了,看到有类似 ...

  8. echarts中的option.legend.data has not been defined.

    1.错误描述 2.错误原因 var map = function(mapData){ require( [ 'echarts', 'echarts/chart/map' ], function (ec ...

  9. Echarts 曲线数少于图例数解决方法

    在上一篇文章 Echarts 多曲线“断点”问题解决方法 中说到了Angular 项目中要使用 Echarts 的方法. 说明了自己解决当“每一条曲线的横坐标不相同”时,在各条曲线上,它们的值采用数组 ...

随机推荐

  1. 由hibernate配置inverse="true"而导致的软件错误,并分析解决此问题的过程

    题目背景软件是用来做安装部署的工具,在部署一套系统时会有很多安装包,通过此工具,可以生成一个xml文件用以保存每个安装包的文件位置.顺序.参数.所需脚本.依赖条件验证(OS..net.IIS.数据版本 ...

  2. spring 4.0 注解数据验证1

    通常情况下,数据验证都分为前台验证,后台验证.并且前台JS验证是肯定有的,那么其实验证的错误信息根本不必通过后台传过去,哪怕就是想国际化,前台JS也能够胜任. 如果前台验证足够了,那么如果还有不正确的 ...

  3. MQTT协议实现Eclipse Paho学习总结二

    一.概述 前一篇博客(MQTT协议实现Eclipse Paho学习总结一) 写了一些MQTT协议相关的一些概述和其实现Eclipse Paho的报文类别,同时对心跳包进行了分析.这篇文章,在不涉及MQ ...

  4. JavaScript学习系列2一JavaScript中的变量作用域

    在写这篇文章之前,再次提醒一下 JavaScript 是大小写敏感的语言 // 'test', 'Test', 'TeSt' , 'TEST' 是4个不同的变量名 JavaScript中的变量,最重要 ...

  5. 20169201 2016-2017-2 实验二《Java面向对象程序设计》

    实验一:程序设计中临时变量的使用 代码托管 1.删除数组中的元素5 for(int i = 4; i < arr.length - 1; i ++){ arr[i] = arr[i + 1]; ...

  6. Django 之 JsonResponse 对象

    JsonResponse 是 HttpResponse 的子类,与父类的区别在于: JsonResponse 默认 Content-Type 类型为 application/json HttpResp ...

  7. SCUT - 337 - 岩殿居蟹 - 线段树 - 树状数组

    https://scut.online/p/337 这个东西是个阶梯状的.那么可以考虑存两棵树,一棵树是阶梯的,另一棵树的平的,随便一减就是需要的阶梯. 优化之后貌似速度比树状数组还惊人. #incl ...

  8. 百度AI图片识别

    官方文档:http://ai.baidu.com/tech/ocr/general

  9. 为什么MOBA和吃鸡类游戏不推荐用tcp协议 延迟不利于实时游戏

    http://news.gamedog.cn/a/20171221/2287418.html 我们知道,不同类型的游戏因为玩法.竞技程度不一样,采用的同步算法不一样,对网络延迟的要求也不一样.例如,M ...

  10. 洛谷P1310 表达式的值

    P1310 表达式的值 题目描述 对于1 位二进制变量定义两种运算: 运算的优先级是: 先计算括号内的,再计算括号外的. “× ”运算优先于“⊕”运算,即计算表达式时,先计算× 运算,再计算⊕运算.例 ...