echarts折线图一条平均值,折线点只展示起始点,其他不展示,并且dataZoom滚动时不影响这条折线其他点的的显示
时间: 2023-09-18 16:11:17 浏览: 65
WPF贝塞尔绘制折线图
可以通过设置折线图的symbol和label来实现折线点只展示起始点,其他不展示的效果。具体代码如下:
```js
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
symbol: 'circle', // 设置折线点的图标
symbolSize: function (value, series) {
// 只展示起始点,其他不展示
if (series.dataIndex === 0 || series.dataIndex === series.data.length - 1) {
return 10;
} else {
return 0;
}
},
label: {
show: true,
position: 'top' // 折线点上方显示数值
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}],
dataZoom: [{
type: 'slider',
start: 0,
end: 50, // 设置dataZoom滚动时不影响平均值折线其他点的显示
handleSize: '80%',
showDataShadow: false,
filterMode: 'empty'
}]
};
```
其中,通过设置symbolSize函数来控制折线点的大小,当数据点的索引为0或最后一个时,将折线点大小设为10,其他时候将折线点大小设为0,实现只展示起始点的效果。
关于dataZoom滚动时不影响平均值折线其他点的显示,可以通过设置dataZoom的end属性,将其设置为一个比较小的值,比如50,这样就只会显示前50%的数据,后面的数据将不会显示出来,也就不会影响平均值折线其他点的显示了。
阅读全文