实现效果如下:
看起来非常简单,但实际实现起来……也确实简单,就是步骤多一点~
我们知道Echarts提供的markPoint标注最大值和最小值是会有一个水滴图案的:
首先要做的就是隐藏这个水滴图案。但如果将markPoint.symbol设为’none’,会将label文本一同去除。
所以思路应为将水滴图案的颜色置为透明。
markPoint: {
symbolSize: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
label: {
show: true,
color: '#fff'
},
data: [
{
type: 'max', name: 'Max' },
{
type: 'min', name: 'Min' }
]
},
接下来是标记出最大值和最小值的两个小点:
这里最初想到的是showSymbol,但该属性为false时,则只有在 tooltip hover 的时候显示坐标点,而当为true时,就会在所有x轴的index都出现标记。
这里就要用到data的详细参数了:
当在symbol: ‘none’,去除所有标记的情况下,举例将data写成这种形式的数组:
data: [820, 932, 901, 934, 1290, { value: 1330, symbol: ‘circle’, symbolSize: 5 }, 1320]
折线图就会是以下效果:
而我们要求在折线数据的最大值和最小值处出现标记,那么就写个方法来封装一下数据数组吧:
getDataSymbol(arr) {
let maxNum = Math.max(...arr); // 取得数据的最大值
let minNum = Math.min(...arr); // 取得数据的最小值
let [maxIndex, minIndex] = [arr.indexOf(maxNum), arr.indexOf(minNum)]; // 取得数据第一次出现最大值与最小值时的索引
let newArr = arr;
newArr[maxIndex] = {
value