echarts-markPoint标注图标宽度随内容值变化

最新推荐文章于 2024-05-06 15:49:21 发布

永远不会太晚

最新推荐文章于 2024-05-06 15:49:21 发布

阅读量451

点赞数

分类专栏： echarts 文章标签： echarts 前端

本文链接：https://blog.csdn.net/qq_42611074/article/details/131436509

版权

echarts 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在这里插入图片描述

option = {
    tooltip: {
        trigger: "axis",
    },
    color: ["#91CC75", "#FAC858", "#5470C6"],
    grid: {
        left: "50",
        right: "50",
        top: "50",
        bottom: "50",
    },
    xAxis: {
        type: "category",
        data: [1, 2],
    },
    yAxis: {
        name: "单位：千",
        type: "value",
        max: function (value) {
            return Math.floor(value.max * 1.1);
        },
        min: function (value) {
            return Math.floor(value.min / 1.1);
        },
    },
    series: [
        {
            lineStyle: {
                color: "#F1BF68",
            },
            itemStyle: {
                color: "#F1BF68",
                borderColor: "#fff",
                borderWidth: 2,
                shadowColor: "#F1BF68",
                shadowBlur: 10,
            },
            symbol: "circle",
            symbolSize: 10,
            markPoint: {
                symbol:
                    "image://" +
                    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAAAjCAMAAAD1/jdcAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALFQTFRFAAAA661F661F661F661F661F661F661F661F661F661F661F661F661F7bNR8Lxi8b5m8b9n661F661F661F8b5l661F661F661F661F8b5m8b9m7bNR661F7LFM661F661F661F7bRS8b5m8L1k7LBK661F661F661F661F661F661F7rVT8L1k7LBL661F661F661F661F7rZV8L1k7LFN661F661F661F661F661FvQ/oBwAAADt0Uk5TAAIHDBIVFgQcLTk/QSNbzvb/Bg0s7jgRPhT391obTSJDS3/45mVJQgMXHTFz5FUrARAoZNJHDhkeCwVXmKGrAAAA40lEQVR4nO3WxxKCMBAG4IWlg8QgRQTE3nvX938wE73KOJN48MB/znzZ0/4LAIqKmm6IRddQVYDFRMt2XE8srmNbaLJJsOGTJhVNk/gNVEC1fHHj5fhWAC2bSCGUkhBBc+RGoTSKE9BdSYTSdgqGJ614Rq3USq3Uyp8rP9iYbsq2d0cS4dv7N03CWi2TQrK8CHjD5iQSNiLSLVnD8rYP449t3+sPhuzhaDyZVrZ9HBY440eDElRcHvPFcpXR9WZbVF8eCQavy6M6O3N/OJ7O5fsz4ezMy/Vm3OUQxswe6uPLxDxPYLiMPmJuVccAAAAASUVORK5CYII",
                symbolSize: (value) =>
                    value ? [value.toString().length * 10, 31] : [65, 31],
                symbolOffset: [0, -22],
                label: {
                    color: "#fff",
                },
                data: [
                    { type: "max", name: "Max" },
                    { type: "min", name: "Min" },
                ],
            },
            connectNulls: true,
            data: [2222.2222, 1111.11111],
            type: "line",
        },
    ],
}