ID

5

配置代码

var option = {
        backgroundColor: "#1A1835",

        title: {
            text: "echarts折线图气泡标注最大值和最小值",
            left: "center",
            top: 10,
            textStyle: {
                color: "#E8EEFF",
                fontSize: 14,
                fontWeight: 400
            }
        },

        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "line",
                textStyle: { color: "#fff" }
            }
        },

        grid: {
            left: 50,
            right: 40,
            top: 80,
            bottom: 50,
            containLabel: true
        },

        legend: {
            top: 40,
            right: 10,
            textStyle: { color: "#90979c" },
            data: ["访问量", "订单量"]
        },

        xAxis: [{
            type: "category",
            boundaryGap: false,
            axisLine: {
                lineStyle: { color: "rgba(204,187,225,0.5)" }
            },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: "rgba(204,187,225,0.8)" },
            data: xData
        }],

        yAxis: [{
            type: "value",
            splitLine: { show: false },
            axisLine: {
                lineStyle: { color: "rgba(204,187,225,0.5)" }
            },
            axisLabel: { color: "rgba(204,187,225,0.8)" }
        }],

        // 已按要求移除 dataZoom

        series: [
            {
                name: "访问量",
                type: "line",
                symbolSize: 10,
                symbol: "circle",
                smooth: true,
                itemStyle: { color: "#6f7de3" },
                lineStyle: { width: 3, color: "#6f7de3" },

                // 气泡标注最大/最小值：type 'max'/'min' 是 ECharts 的 markPoint 内置计算方式 [web:2][web:3]
                markPoint: {
                    symbol: "pin",
                    symbolSize: 50,
                    label: {
                        color: "#fff",
                        formatter: function (p) {
                            // p.name 会是 '最大值'/'最小值'
                            return p.name + "\n" + p.value;
                        }
                    },
                    data: [
                        { type: "max", name: "最大值" },
                        { type: "min", name: "最小值" }
                    ]
                },

                data: visitData
            },
            {
                name: "订单量",
                type: "line",
                symbolSize: 10,
                symbol: "circle",
                smooth: true,
                itemStyle: { color: "#c257F6" },
                lineStyle: { width: 3, color: "#c257F6" },

                markPoint: {
                    symbol: "pin",
                    symbolSize: 50,
                    label: {
                        color: "#fff",
                        formatter: function (p) {
                            return p.name + "\n" + p.value;
                        }
                    },
                    data: [
                        { type: "max", name: "最大值" },
                        { type: "min", name: "最小值" }
                    ]
                },

                data: orderData
            }
        ]
    };

完整示例代码