javascript - echarts如何实现折线图的所有波峰，波谷都添加一个显著的红色标点？

Question

echarts如何实现折线图的所有波峰，波谷都添加一个显著的红色标点，如图所示

Answer 1

要在 ECharts 中实现折线图的所有波峰和波谷添加红色标点，您需要使用 markPoint 组件。下面是一个示例配置，用于在折线图的每个波峰和波谷上添加红色标点：

option = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'value'    },    series: [{        data: [820, 932, 901, 934, 1290, 1330, 1320],        type: 'line',        markPoint: {            symbol: 'circle', // 设置标点形状为圆形            symbolSize: 8, // 设置标点大小            itemStyle: {                color: 'red' // 设置标点颜色为红色            },            data: [                {type: 'max', name: '波峰'}, // 在最大值处添加标点                {type: 'min', name: '波谷'} // 在最小值处添加标点            ]        }    }]};

上述代码中的关键部分是 markPoint 配置项。symbol 属性设置为圆形（'circle'），symbolSize 属性设置标点的大小，itemStyle 属性设置标点的颜色为红色。在 data 属性中，我们指定了两个数据点，一个用于最大值（波峰），一个用于最小值（波谷）。这样，ECharts 就会在每个波峰和波谷处添加一个红色的圆形标点。