其他分享
首页 > 其他分享> > echarts图表配置参数,这原因我服了

echarts图表配置参数,这原因我服了

作者:互联网


axisLabel: {

  interval:0,

  rotate:40

}

·设置标签换行

让标签按分隔符显示


axisLabel: {

  formatter: function(value) {

    return value.split('').join('\n') //将标签竖排显示,将字符串中每个字符都用回车分隔开

  }

}

3.y轴刻度标识显示不全

y轴刻度显示不全,调整图表大小和外边盒子大小都不起作用

在此要通过属性实现,有两个方法

·grid绘图区调整

grid为直角坐标系内绘图网格,可以在网格上绘制图表

可通过设置grid组件的 top、bottom、left、right 等属性来设置grid组件距离窗口上下左右的距离

通过 width height 等设置组件宽高


grid: {}

  left: 50

}

也可通过x y属性来设置留白位置


grid: {

  x: 60, //左留白

  y: 80, // 上留白

  x2: 12, // 右留白

  y2: 15  // 下留白

}



·刻度标签与轴线之前的距离

axisLabel.margin 刻度标签与轴线之前的距离


yAixs: {

  axisLabel: {

    margin: 50

  }

}

axisLabel属性为x y轴坐标轴刻度标签的相关设置(xAxis.axisLabel / yAxis.axisLabel)

*axisLabel常用属性

. axisLabel.show 是否显示刻度标签

. axisLabel.interval 坐标轴刻度标签的显示间隔

. axisLabel.inside 刻度标签是否朝内,默认朝外

. axisLabel.rotate 刻度标签旋转的角度,在标签显示不下的时候可对标签进行旋转防止重叠

. axisLabel.formatter 刻度标签的内容格式器

. axisLabel.color(fontize/fontStyle/align/lineHeight/backgroundColor) 刻度标签常用css样式设置

4.图表区域线条颜色等

·areaStyle 区域填充颜色
·lineStyle 线条颜色
·itemStyle 折线点颜色

series: [{

  // 折线区域颜色

  areaStyle: { color: '#0c229f45'},

  // 折线线条颜色

  lineStyle: { color: '#0c229f45'},

  // 折线点颜色(散点图颜色描边等样式)

  itemStyle: { color: '#0c229f45'}

}]

5.图表上文本标签设置 label.normal


series: [{

  label: {

    normal: {

      show: true, // 是否显示

      position: top, //值还可以是(/left/right/inside/insideTop,[50%, 50%]相对图形左上角的位置)

      distance: 30,// 当positon值为'top'等有效

      rotate: 30, // 旋转角度

      offset: true, //文字偏移量

      formatter:  function(val) {

        var strs = val.name.split('') //字符串数组

        var str = ''

        for(var i = 0, s; s = strs[i++];) { //遍历字符串数组

          str += s

          if(!(i % 4)) str += '\n' //按需要求余

          }

        return `${str}: ${val.value}%`

      },//文本格式设置

      color: red // (fontSize, fontStyle, fontWeight等css常用属性)

    }

  }

}]

6.图表上图表的高亮样式label.emphasis


series: [

  label: {

    normal: {},

    emphasis: {

      show: true, //是否有高亮效果

      textStyle: {

        fontWeight: 'bold'

      }

    }



### 最后前端到底应该怎么学才好?

如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。



不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。

**[CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](

)**

![在这里插入图片描述](https://www.icode9.com/i/ll/?i=87c2dbe3aa9546dab0e3e5c674753150.jpg?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)  

![在这里插入图片描述](https://www.icode9.com/i/ll/?i=a3cbdf94b9be48529119539cde243f97.jpg?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)



![在这里插入图片描述](https://www.icode9.com/i/ll/?i=0f2364db34af4d57b77547b5f312230a.jpg?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

![在这里插入图片描述](https://www.icode9.com/i/ll/?i=187f1f54cfd94cf7b88a363ffa363f10.jpg?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

> **本文已被[CodeChina开源项目:【一线大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://codechina.csdn.net/m0_60958482/web-p7)收录,自学编程路线及系列技术文章等资源持续更新中...**

标签:color,标签,axisLabel,图表,grid,刻度,留白,我服,echarts
来源: https://blog.csdn.net/m0_61549740/article/details/120221386