🐱 个人主页：不叫猫先生
🙋♂️ 作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫系列专栏：vue3从入门到精通、TypeScript从入门到实践
📢 资料领取：前端进阶资料以及文中源码可以找我免费领取
🔥 前端学习交流：博主建立了一个前端交流群，汇集了各路大神，互相交流学习，期待你的加入！(文末有我wx或者直接私信)
目录
- 折线图
-
- 1.title
- 2.tooltip
- 3.grid
- 4.legend
- 5.xAxis
- 6.yAxis
- 7.series
- 附：常见问题
-
- 1、自定义X轴文字（文字替换）
- 2、自定义X轴文字（文字换行）
- 3、自定义tooltip
本文主要讲解使用Echarts时setOption里面的属性以及常见的问题，参数都是本人项目里的具体参数。设置内容都是在
setOption({ })中。
折线图
图示：
1.title
title：设置图标标题
- text：标题名称
- left：标题定位方向
- top、left：定位
- textStyle：标题样式
- color：标题颜色
title: {
text: '答辩评分趋势',
left: 'left',
top: 20,
left: 20,
textStyle: {
color: '#679CF6'
}
}
2.tooltip
tooltip：提示框
- trigger：触发类型（axis:鼠标触摸到轴触发，item:鼠标触摸到折线点触发）
- showDelay：添加延迟时间，避免来回切换（单位ms）
- axisPointer：坐标轴指示器，坐标轴触发有效
- type：line/shadow（默认line，设置shadow时鼠标放上去有阴影）
- shadowStyle：当设置值为shadow时，
tooltip: {
trigger: 'axis',
// 显示延迟，添加显示延迟可以避免频繁切换，单位ms
showDelay: 200,
// 坐标轴指示器，坐标轴触发有效
axisPointer: {
// 默认为直线，可选为：'line' | 'shadow'
type: 'show',
shadowStyle: {
shadowBlur: 1,
opacity: 0.3
}
},
},
3.grid
grid：图表距离容器的位置
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: '30%',
containLabel: true
},
- containLabel 为 false 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。- containLabel 为 true 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。- 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件
4.legend
legend：图例
- data：图例的具体文字
- textStyle：图例的文字
- icon：图例的形状 （包括：circle，rect ，roundRect，triangle，diamond，pin，arrow，none）
legend: {
data: ['xx', 'xx', 'xx', 'xx'],
right: '33%',
top: '10%',
textStyle: {
fontSize: 12,
color: '#666'
},
icon: "circle",
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 40 // 设置间距
},
5.xAxis
xAxis ：x轴设置
- name：单位
- splitLine：网格线
- show：false （去除网格线）
- data：x轴坐标显示的数据，数组类型
- axisLine：设置x轴的轴线
- show：true（设置显示）
- lineStyle：设置轴线的样式
- color：颜色
- width：宽度
- type：线条类型
- axisLabel：设置x轴文字样式
- textStyle：文字样式，对象类型
- show：是否展示
- fontSize：字体大小
- color：文字颜色
- formatter：自定义文字，后面跟一个函数，默认会一个参数，x坐标的值
xAxis: {
type: "value",
// x轴的名字，可以理解成单位
name: "单位(K)",
nameTextStyle: {
// x轴的名字的样式相关
color: "#BFBFBF",
nameLocation: "start",
},
splitLine: {
//去除网格线
show: false,
},
//去除网格区域，否则会有一片区域
splitArea: { show: false },
data: [0, 5000, 10000, 15000, 20000, 25000, 30000, 35000],
axisLine: {
// 把x轴从实线变成虚线
show: true,
lineStyle: {
// 设置x轴线条样式的颜色
color: "#BDBDBD",
width: 1,
type: "solid",
},
},
axisLabel: {
formatter: function (value) {
return value >= 5000 ? parseInt(value / 1000) + "K" : value;
},
scale: true, // 设置数据自动缩放
}
},
6.yAxis
- yAxis：与x轴基本同理
7.series
series：图标系列，对象类型
- type：line（图标类型为线性图标）
- smooth：true（设置折线为光滑）
- name：图标名称
- areaStyle：图标区域的样式（本文中的图标设置的为渐进色）
- data：图标的数据
- markLine：基线
- symbol：none（去掉基线的箭头）
- lable：基线的文字设置
- position：基线文字位置（start,middle,end）
- show：是否显示基线文字
- formatter：基线文字内容
- data：设置基线（Array类型）
- silent：鼠标悬停（true/false）
- lineStyle：基线线条设置，对象类型
- type：solid（基线线条类型）
- color：基线线条颜色
- yAxis：y轴基线的值
series: [
{
data: this.trendLineData.map(item => item.defenceScore),
type: 'line',
smooth: true,
name: "答辩评分",
areaStyle: {
normal: {
opacity: 0.3,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#679CF6'
}, {
offset: 1,
color: '#fff'
}])
}
},
// 基线设置
markLine: {
symbol: "none",
data: [{
silent: false,
lineStyle: {
type: "solid",
color: "#E34949",
},
yAxis: 3.5
},
{
silent: false,
lineStyle: {
type: "solid",
color: "#3BC9A9",
},
yAxis: 4
}
]
}
},
],
附：常见问题
1、自定义X轴文字（文字替换）
axisLabel: {
formatter: function (value) {
return value >= 5000 ? parseInt(value / 1000) + "K" : value;
},
scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了
}
2、自定义X轴文字（文字换行）
其中this.trendLineData为后端数据，其实就是将x轴的类目项文字可以动态换行
formatter: (value) => {
if (this.trendLineData.length > 2) {
//拼接加\n返回的类目项
var ret = "";
//每项显示文字个数
var maxLength = 12;
//X轴类目项的文字个数
var valLength = value.length;
//类目项需要换行的行数
var rowN = Math.ceil(valLength / maxLength);
if (rowN > 1)
{
for (var i = 0; i < rowN; i++) {
//每次截取的字符串
var temp = "";
//开始截取的位置
var start = i * maxLength;
//结束截取的位置
var end = start + maxLength;
//这里也可以加一个是否是最后一行的判断
temp = value.substring(start, end) + "\n";
//拼接最终的字符串
ret += temp;
}
return ret;
}
else {
return value;
}
} else {
return value;
}
}
3、自定义tooltip
tooltip: {
trigger: 'axis',
// 显示延迟，添加显示延迟可以避免频繁切换，单位ms
showDelay: 200,
// 坐标轴指示器，坐标轴触发有效
axisPointer: {
// 默认为直线，可选为：'line' | 'shadow'
type: 'shadow',
shadowStyle: {
shadowBlur: 1,
opacity: 0.3
}
},
formatter: function (data) {
var res = "<div style='display:flex;'>";
res += "<div class='left' >"
res += '答辩数' + '</br>'
data.forEach(item => {
item.value = item.value ? item.value : 0;
if (item.seriesType == 'bar') {
res += item.marker + item.seriesName + '答辩数' + '：' + item.value + '</br>';
}
});
res += " </div>"
res += "<div class='right' style='margin-left:20px'>"
res += '分数' + '</br>'
data.forEach(item => {
item.value = item.value ? item.value : 0;
if (item.seriesType == 'line') {
res += item.marker + item.seriesName + (item.seriesName == '总体' ? '平均分' : '分数') + '：' + item.value + '</br>';
}
});
res += " </div>"
res += " </div>"
return res
}
},
结果如图所示：
