本文主要是介绍echarts设置折现图拐点，只需要特定的值才显示拐点（比如：最大值、最小值），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、需求效果
echarts折线图，只需要显示最大值和最小值的拐点。
红色圆圈标红的是拐点。现在我只想要最大值、最小值显示。
只需要把这个放到一个，echarts在线编辑器就能修改，并看到效果。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
二、实现步骤
方案一：
需要把数据，变成下面这种形式。symbol就是拐点类型，none就是不显示。itemStyle.normal可以设置其样式。具体看api文档。
[
{
value:150
},
{
value:154
}
]
具体代码：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [
{
value: 9,
symbolSize: 8, //拐点大小
itemStyle: {
normal: {
color: 'red',
borderColor: 'red', //拐点边框颜色
},
},
},
{
value: 20,
symbol: 'none', //拐点样式 不显示
},
{
value: 15,
symbol: 'none', //拐点样式 不显示
},
{
value: 9,
symbol: 'none', //拐点样式 不显示
},
{
value: 20,
symbolSize: 8, //拐点大小
itemStyle: {
normal: {
color: 'red',
borderColor: 'red', //拐点边框颜色
},
},
},
{
value: 10,
symbol: 'none', //拐点样式 不显示
},
{
value: 15,
symbol: 'none', //拐点样式 不显示
},
],
type: 'line',
},
],
};
echarts折线图设置特定拐点https://www.makeapie.com/editor.html?c=xePqG2zTLi
方案二：
利用symbol函数实现
//使用这个 https://www.makeapie.com/editor.html?c=xePqG2zTLi 里面的方法更灵活
let value = [150, 230, 224, 218, 135, 147, 260];
let min = Math.min(...value); //计算最小值
let max = Math.max(...value); //计算最大值
console.log(min, max);
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
symbol: function (value, params) {
console.log(params);
if (value == min || value == max) {
return 'circle'; //拐点类型
} else {
return 'none'; //拐点不显示
}
},
itemStyle: {
normal: {
color: 'red',
borderColor: 'red', //拐点边框颜色
lineStyle: {
color: '#ff9c35', //折线颜色
},
},
},
},
],
};
利用symbol实现特定拐点显示
echarts官方文档https://echarts.apache.org/zh/option.html#title
echarts社区
总结：
echarts，社区里有很多效果，当官网示例没找到想要的效果可以去，社区里找找。可以自己发布作品。还可以在线编辑，修改。
————————————————
版权声明：本文为CSDN博主「崽崽的谷雨」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44058725/article/details/119379471
这篇关于echarts设置折现图拐点，只需要特定的值才显示拐点（比如：最大值、最小值）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
