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开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](
)**
> **本文已被[CodeChina开源项目：【一线大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://codechina.csdn.net/m0_60958482/web-p7)收录，自学编程路线及系列技术文章等资源持续更新中...**
标签：color,标签,axisLabel,图表,grid,刻度,留白,我服,echarts 来源： https://blog.csdn.net/m0_61549740/article/details/120221386