echarts的title和legend重合解决(各种小细节)

时间:2023-12-13 10:32:44

一:关于title与legend重叠

  1.重合样子

    echarts的title和legend重合解决(各种小细节)

  2.解决办法:

    legend:{

      show: true,

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

    },

  3.解决后样子:

    echarts的title和legend重合解决(各种小细节)


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

  1.原来样子:

    echarts的title和legend重合解决(各种小细节)

  2.解决办法:

    dataZoom: [

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

        width:"100%",

      }]

  3.调整后:

    echarts的title和legend重合解决(各种小细节)


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

  1.显示前:

    echarts的title和legend重合解决(各种小细节)

  2.解决方法:  

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

  3.显示后

    echarts的title和legend重合解决(各种小细节)


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

  1.遮挡样子:

    echarts的title和legend重合解决(各种小细节)

  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.解决后:

    echarts的title和legend重合解决(各种小细节)

  4.相关知识点

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

  


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

   1.显示效果

      echarts的title和legend重合解决(各种小细节)

   2.相关知识点        

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

   3.不显示阴影之后

    echarts的title和legend重合解决(各种小细节)

       4.相关知识点

      echarts的title和legend重合解决(各种小细节)


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

    1.超出范围

      echarts的title和legend重合解决(各种小细节)

    2.解决办法

     tooltip : {

      confine: true

     },

    3.解决后

      echarts的title和legend重合解决(各种小细节)

    4.相关知识点

      echarts的title和legend重合解决(各种小细节)

      默认:[ default: false ]

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

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


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

    1.显示所有标签

      echarts的title和legend重合解决(各种小细节)

    2.相关知识点

      axisLabel: { 

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

      }

    3.隔个显示

      echarts的title和legend重合解决(各种小细节)


八: 

      

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