echarts中effectScatter散点图将某些点显示在上面不被覆盖

发布时间：2023-07-07 16:11:08 修改时间：2023-07-07 16:11:08 阅读：11203 评论：0 0

在 effectScatter 散点图中，如果某些点被其他点覆盖，你可以通过调整它们的显示顺序或设置它们的标签位置来解决这个问题。下面是两种方法：


1. 调整显示顺序：将需要显示在上层的点放在数据中的后面，这样它们会被后绘制的点覆盖。在绘制 effectScatter
   散点图时，数据中后面的点会覆盖前面的点。
2. 设置标签位置：如果你希望特定的点在绘图时不被覆盖，可以通过设置标签位置来保证它们的可见性。你可以使用 label属性设置每个点的标签，并使用 label_opts 控制标签的显示样式。通过设置标签的位置，可以确保它们不会被其他点覆盖。
   

参考代码碎片：


option = {

  series: [{

    type: 'effectScatter',

    data: [

      [10, 20],

      [20, 30],

      [30, 40],

      // ...

      [50, 60]  // 需要显示在上层的点

    ],

    label: {

      show: true,

      position: 'top'  // 标签显示在点的上方

    },

    labelOpts: {

      backgroundColor: 'rgba(255, 255, 255, 0.8)',  // 标签背景颜色

      borderColor: '#000',  // 标签边框颜色

      borderWidth: 1,  // 标签边框宽度

      borderRadius: 4,  // 标签边框圆角

      padding: [4, 8]  // 标签内边距

    }

  }]

};





// 使用上述配置绘制散点图

myChart.setOption(option);

---