echarts 多个markPoint

关注

原创最新推荐文章于 2026-09-29 12:00:40 发布 1.1w 阅读 AI 写同款· GEO 优化 ›

在echarts柱状图两侧添加亮灯圆点图标—markPoint用法在echarts柱状图两侧中添加亮灯圆点图标需求背景本需求是项目实际开发需求，亮灯圆点作为预警风险情况，分布在柱状图的两侧，如下图所示：从无到有的开发思路（1）首先，本主之前未做过类似的开发需求，但是既然客户提出这样的需求，我们就尽量满足。我在echarts官方案例中，找到一个具有相似特点的例子，不知道大家看过之后会对我的需求有什么联系，如下图所示：（2）... 阅读详情

效果如图：

因为文字的多少是不确定的所以背景图和小图标要分开来写，也有的说可以用html+css来写这个图标，我试了没成功~。因为是echarts的配置里面的图片不能被file-loader处理到，所以我用了base64的，当然也用绝对路径来代替。代码：

markPoint: {
              label: {
                normal: {
                  padding: [5, 10, 10, 10],
                  fontSize: 14,
                  color: "#FF9200",
                  align: "center",
                  offset: [0, -30],
                  formatter: [`{a|}`, `{b|建议${month}月${day}日清洗}`].join(""),
                  rich: {
                    a: {
                      backgroundColor: {
                        image:
                          "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABG0lEQVQ4T62TP0sDQRDFf3OBdDamT2OXFHb2IjaivR/AJpCAYGGb1kIiXsAmH8ImNiFFPkAKIYHUYidarE1Q7kbuTyRcdiKRbDc7M2/fm3krFI52qRNzgXCMUk3TwgvKgICeNJkut8gi0DZlKtyiNIBSETiPI4QH3rmSNl8ZNpA27/IEHBmNxeshH5wkIBlASIjS9DQ/IsxRzldyQldatCTX/OylHbFHhKPMmwc8ImBf9J4OcOmlXqJGgOObV0PanWjIBKXuLYg5ABwBM29emCYMHLBjFBwiOGLGBoPP9QAxZzmDkQ2wTgL0gDl4N5SYIJVgDxFu8pev7SFm1vWvEU5RFKFvrvEPI9nGXBhpK1b+BfnvZ1rmuel3/gEna3Cfd8+7ZgAAAABJRU5ErkJggg=="
                      },
                      width: 16,
                      height: 16
                    },
                    b: {
                      color: "#FF9200",
                      lineHeight: 20,
                      padding: [0, 0, 0, 5]
                    }
                  }
                },
                emphasis: {
                  show: false
                }
              },
              data: [
                {
                  coord: [`${year}-${fullMonth}-${fullDay}`, this.data.value],
                  symbolSize: [1, 1],
                  label: {
                    normal: {
                      show: isShowPoint,
                      backgroundColor: {
                        image:
                          "data:image/png;base64,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"
                      },
                      rich: {
                        a: {
                          color: "#FF9200"
                        }
                      }
                    },
                    emphasis: {
                      show: false
                    }
                  }
                },{
                  coord: [`${year}-${fullMonth}-${fullDay}`, this.data.value],
                  symbolSize: [1, 1],
                  label: {
                    normal: {
                      show: isShowPoint,
                      offset: [0, 0],
                      formatter: [`{a|}`].join(""),
                      backgroundColor: {
                        image: "transparent"
                      },
                      borderColor: "#f0f",
                      boderWidth: 6,
                      borderRadius: 6,
                      formatter: [`{a|}`].join(""),
                      rich: {
                        a: {
                          width: 18,
                          height: 18,
                          borderColor: "#f0f",
                          boderWidth: 6,
                          borderRadius: 6,
                          backgroundColor: {
                            image: 
                              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABb0lEQVRIS7WVu04CURCGv0mMMTGgNhZKg42JlQWFFhZa44U3kMrSSKEBayFaYNTKijcQL9RSWGhBYWW0okELG7mExBiSYxZ2ue0uRORsOfPvt//OOTMjuDwqwRTjbCJsoFgAZkzpB8ILiluq3EiULyeEdAdVijHK7CHsA5NuHzbjRRQneDmVMN/t2g6wSjLLCNdAoA+wO52jxpZEeLcSTbAJfQJ8f4Ra8gI1lix4HVz//QoPAzi1O/ewYpSlAT4jihAf0Gnna4qY7JIQ8/TzwIQj2B+ExQhMm2X/zMFzEvIZNx8lqvhFnbMNpBxVy0cQiDkDcnF4PHSDh0VdcIUiZFMYToN3vauTWXd2LqQNx6/AvI0Qugffam9wIQvpNSfNmwEuAx5bdqcMo/Zwh+6nApdeJ3BFK1hTKTQenqbr1hiPw2yQIlXm9LW01iFUhzdm8XDHpnXDtQz6Jry1mg5cJ16r10oojvuupvbe/O8y/QUfS6N/V40yfwAAAABJRU5ErkJggg=="
                          },
                        }
                      }
                    },
                    emphasis: {
                      show: false
                    }
                  }
                }
              ]
            }

收录于