echarts教程（六）：折线图的最高点，最低点，平均值的标注

深藏阁楼爱情的钟 2022-10-30 02:23 194阅读 0赞

折线图 设置最高点，最低点， 平均线

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]

核心代码

markPoint: { 
        data: [
            { type: 'max', name: '最大值'},
            { type: 'min', name: '最小值'}
        ]
    },
    markLine: { 
        data: [
            { type: 'average', name: '平均值'}
        ]
    }

https://echarts.apache.org/zh/option.html\#series-line.markPoint

`series-line.markPoint. data Array`  
标注的数据数组。每个数组项是一个对象，有下面几种方式指定标注的位置。

通过`x, y` 属性指定相对容器的屏幕坐标，单位像素，支持百分比。  
用 `coord` 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置`'min', 'max', 'average'`。

直接用 `type` 属性标注系列中的最大值，最小值。这时候可以使用 `valueIndex`或者 `valueDim` 指定是在哪个维度上的最大值、最小值、平均值。

当多个属性同时存在时，优先级按上述的顺序。

完整代码

option = { 
        title: { 
            text: '未来一周气温变化',
            subtext: '纯属虚构'
        },
        tooltip: { 
            trigger: 'axis'
        },
        legend: { 
            data: ['最高气温', '最低气温']
        },
        toolbox: { 
            show: true,
            feature: { 
                dataZoom: { 
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false},
                magicType: { type: ['line', 'bar']},
                restore: { },
                saveAsImage: { }
            }
        },
        xAxis: { 
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { 
            type: 'value',
            axisLabel: { 
                formatter: '{value} °C'
            }
        },
        series: [
            { 
                name: '最高气温',
                type: 'line',
                data: [10, 11, 13, 11, 12, 12, 9],
                markPoint: { 
                    data: [
                        { type: 'max', name: '最大值'},
                        { type: 'min', name: '最小值'}
                    ]
                },
                markLine: { 
                    data: [
                        { type: 'average', name: '平均值'}
                    ]
                }
            },
            { 
                name: '最低气温',
                type: 'line',
                data: [1, -2, 2, 5, 3, 2, 0],
                markPoint: { 
                    data: [
                        { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: { 
                    data: [
                        { type: 'average', name: '平均值'},
                        [{ 
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        }, { 
                            symbol: 'circle',
                            label: { 
                                position: 'start',
                                formatter: '最大值'
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221024/eb7aec01bd374ae4b0d0644d49236fd9.png