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，社区里有很多效果，当官网示例没找到想要的效果可以去，社区里找找。可以自己发布作品。还可以在线编辑，修改。