返回

将Echarts图中坐标重合的点一一标记(查找JSON中的重复值)

前端

Echarts是一个功能强大的数据可视化库,能够生成各种类型的图表。在某些情况下,您可能需要在Echarts图中标记坐标重合的点,以便于查看和分析。例如,您可能想要标记散点图中重叠的点,或者标记折线图中重叠的点。

要标记坐标重合的点,您可以使用以下步骤:

  1. 将多个数组合并到同一数组中。
  2. 遍历JSON数组对象中的x和y坐标,并找出完全相等的坐标点。
  3. 将这些坐标点添加到数组中。
  4. 将所有坐标点一同添加到series中。

下面是一个示例代码,演示如何使用这些步骤来标记坐标重合的点:

var myChart = echarts.init(document.getElementById('main'));

var option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line'
  }]
};

// 将多个数组合并到同一数组中
var data = [];
for (var i = 0; i < option.series.length; i++) {
  data = data.concat(option.series[i].data);
}

// 遍历JSON数组对象中的x和y坐标,并找出完全相等的坐标点
var duplicatePoints = [];
for (var i = 0; i < data.length; i++) {
  for (var j = i + 1; j < data.length; j++) {
    if (data[i] === data[j]) {
      duplicatePoints.push(i);
    }
  }
}

// 将这些坐标点添加到数组中
var duplicatePointsArray = [];
for (var i = 0; i < duplicatePoints.length; i++) {
  duplicatePointsArray.push([option.xAxis.data[duplicatePoints[i]], data[duplicatePoints[i]]]);
}

// 将所有坐标点一同添加到series中
option.series.push({
  data: duplicatePointsArray,
  type: 'scatter',
  symbol: 'circle',
  symbolSize: 10,
  color: 'red'
});

myChart.setOption(option);

通过使用这些步骤,您就可以在Echarts图中标记坐标重合的点。这将使您能够更轻松地查看和分析数据。