echart相关操作xAxis,yAxis,series,grid,(包括x轴样式，y轴样式，折现样式，网格样式，折现阴影，折线上方显示数据，x轴文字倾斜，图例，标题， tooltip文字自定义)

本文链接：https://blog.csdn.net/weixin_53954018/article/details/128365782

1. x，y轴相关操作：xAxis，yAxis

(1) x，y轴的颜色：

axisLine: {
lineStyle: {
color: '#2898e5',
},
},

(2) x，y轴文字颜色：

axisLabel: {
show: true,
textStyle: {
color: '#019bf8'
}
}
（3）x，y轴刻度颜色：

axisTick: {
lineStyle: { color: '#2898e5' }
}
(4) x，y轴坐标文字太长显示不全：,倾斜rotate

axisLabel: {
show: true,
interval: 0,
rotate: 20
},
（5）x ,y 轴网格线的颜色：

splitLine: {
show: true,
lineStyle: {
color: ['rgb(1,155,246,0.3)'], //网格线
width: 1,
}
},
2. 折现的样式

（1）折现的平滑度series：

symbol: 'circle', //实心点
symbolSize: 6, //实心点的大小
smooth: true, //折现平滑
（2）折现的颜色：

itemStyle: {
normal: {
color: 'transparent'
}
},
（3）折现阴影变色：

areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(52,214,145)' //渐变上边颜色
}, {
offset: 1,
color: 'transparent' //渐变下边颜色
}])
}
},
（4）折线上方显示文字：

label: {
normal: {
show: true,
position: 'top', //头上显示数据
color: 'rgb(0,255,255)' //显示文字颜色
}
},
3. grid图区域距离四周的距离：

在grid绘图网格里,containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示, 但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决;

grid: {
left: '3%',
right: '4%',
bottom: '15%',
top: '15%',
containLabel: true
},
4. 图例添加以及设置

legend: {
data: ["图例1", "图例2", "图例3"],
icon: "circle", // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，
// diamond，pin，arrow，none
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 40， // 设置间距
orient: 'vertical', //vertical是竖着显示，默认是横着
left: '70%', //距离左边70%，也可用left,center,right
y: 'center', //上下居中显示，也可以用百分比
textStyle:{ //图例文字设置
fontSize: 18,//字体大小
color: '#ffffff'//字体颜色
}

}
注：图例跟series的name要保持一致，否则图例不出来

5. echarts的标题

title: {
text: '今日排放总量与昨日对比', //标题
subtext: '2019-1-28', //小标题
x: 'center', //左右距离
y: '30%', //上下距离
itemGap: 10, //间距
textStyle: { //文字设置
color: 'rgba(30,144,255,0.8)',
fontFamily: '微软雅黑',
fontSize: 12,
fontWeight: 'bolder'
}
},
6. tooltip自定义设置

res是测试循环数据，为了自定义中tooltip中标题和x轴文字不相同（但是还是这一条数据的name,x轴是id,这一操作防止x轴过长用数字代替，但是鼠标移入还是要显示正确的name）

其余的都是正常的数据显示，params[0].marker是显示的文字前的图形

var option = {
tooltip: {
trigger: 'axis'
},
title: {
text: '今日排放总量与昨日对比', //标题
subtext: '2019-1-28', //小标题
x: 'center', //左右距离
y: '30%', //上下距离
itemGap: 10, //间距
textStyle: { //文字设置
color: 'rgba(30,144,255,0.8)',
fontFamily: '微软雅黑',
fontSize: 12,
fontWeight: 'bolder'
}
},
legend: {
data: ["图例1"],
left: 'cnter', //距离左边70%，也可用left,center,right
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['福州市', '无锡市', '兰州市', '合肥市', '广州市', '贵阳市', '长沙市'],
axisLine: {
lineStyle: {
color: '#2898e5', //轴颜色
},

},
axisLabel: {
interval: 0,
rotate: 40, //倾斜度
show: true,
textStyle: { //轴上文字
color: '#019bf8' //颜色
}
},

axisTick: {
lineStyle: { color: '#2898e5' }, // 刻度的颜色
},

},
grid: { //距离
left: '3%',
right: '4%',
bottom: '15%',
top: '15%',
containLabel: true //保留文字距离
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#2898e5', //轴
},
},
axisLabel: {
show: true,
textStyle: {
color: '#019bf8' //轴字体
}
},
splitLine: {
show: true,
lineStyle: {
color: ['rgb(1,155,246,0.3)'], //网格线颜色
width: 1,
}
},
axisTick: {
lineStyle: { color: '#2898e5' } // x轴刻度的颜色
}

},
series: [{
name: '图例1',
data: [1000, 920, 856, 601, 934, 1090, 802, 1000],
symbol: 'circle', //折线拐点实心圆
symbolSize: 6, //实心圆大小
smooth: true, //折线平滑
label: {
normal: {
show: true,
position: 'top', //折线上方显示数据
color: 'rgb(0,255,255)'
}
},
itemStyle: {
normal: {
color: 'rgb(0,255,255)' //折线颜色
}
},
areaStyle: { //阴影颜色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#019bf8' //渐变色上方颜色
}, {
offset: 1,
color: 'transparent' //渐变色下方颜色
}])
}
},
type: 'line'
}]
};