Marking lines and marking points

Basic Concepts of Mark Lines and Mark Points

In ECharts, mark lines and mark points are auxiliary elements used to highlight specific data or regions in a chart. Mark lines typically appear as straight lines that traverse the chart, while mark points are graphical markers displayed at specific data positions. These two elements are commonly used to annotate key data points such as averages, thresholds, maximums, and minimums.

In common chart types like line charts and bar charts, mark lines and mark points can intuitively convey additional information. For example, in a line chart showing monthly sales figures, a mark line can be added to represent the annual sales target, allowing viewers to immediately see which months met the target.

Configuration and Usage of Mark Lines

Mark lines are configured using the markLine option, which supports various positioning methods and style customizations. The most basic configuration includes specifying the line's position and style:

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    markLine: {
      data: [{
        type: 'average',  // Average line
        name: 'Average Line'
      }],
      lineStyle: {
        color: '#ff0000',
        width: 2,
        type: 'dashed'
      }
    }
  }]
};

Mark lines support multiple positioning methods:

1. Statistical value-based positioning: Such as average (mean), max (maximum), min (minimum).
2. Fixed value positioning: Directly specifying a numerical value on the y-axis.
3. Data point positioning: Connecting two specific data points.

Advanced configurations can include labels, custom styles, and interactive effects:

markLine: {
  silent: false,  // Interactive
  symbol: ['none', 'arrow'],  // Start and end symbols
  label: {
    position: 'middle',  // Label position
    formatter: 'Target Value: {c}'  // Custom label content
  },
  data: [{
    yAxis: 1000,  // Fixed value
    lineStyle: {
      color: '#00ff00'
    }
  }]
}

Configuration and Usage of Mark Points

Mark points are implemented using the markPoint option and are used to highlight specific data positions. Common use cases include annotating extreme values or special event points:

series: [{
  type: 'line',
  data: [820, 932, 901, 934, 1290, 1330, 1320],
  markPoint: {
    data: [
      { type: 'max', name: 'Maximum' },
      { type: 'min', name: 'Minimum' },
      {
        coord: [4, 1290],  // Specified coordinate position
        itemStyle: {
          color: '#ff0000'
        }
      }
    ],
    symbol: 'pin',  // Marker shape
    symbolSize: 40  // Marker size
  }
}]

Mark points support various built-in types:

• max/min: Maximum/minimum values.
• average: Mean value point.
• Custom coordinate points.

Advanced mark point configuration example:

markPoint: {
  symbol: 'circle',
  symbolSize: function (val) {
    return val[1] > 1000 ? 20 : 10;  // Dynamic size
  },
  label: {
    show: true,
    formatter: function (param) {
      return param.data.value[1];
    },
    position: 'top'
  },
  itemStyle: {
    color: function (param) {
      return param.data.value[1] > 1000 ? 'red' : 'blue';
    }
  },
  data: [
    { name: 'Special Point', coord: [2, 901] }
  ]
}

Combining Mark Lines and Mark Points

In practical applications, mark lines and mark points are often used together to enhance the chart's information delivery capabilities:

series: [{
  type: 'bar',
  data: [12, 25, 18, 32, 27, 15, 22],
  markLine: {
    data: [
      { type: 'average', name: 'Average Line' },
      { yAxis: 20, name: 'Threshold Line' }
    ]
  },
  markPoint: {
    data: [
      { type: 'max', name: 'Maximum' },
      { type: 'min', name: 'Minimum' },
      { coord: [3, 32], name: 'Peak' }
    ]
  }
}]

This combination can clearly display data distribution characteristics, such as which data points are above the average or which have exceeded a threshold.

Dynamic Updates to Mark Elements

ECharts supports dynamically updating mark lines and mark points, which is very useful for interactive data analysis:

// Initialize the chart
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

// Dynamically add a mark line
function addMarkLine(value) {
  const option = myChart.getOption();
  option.series[0].markLine.data.push({
    yAxis: value,
    name: 'Dynamic Line',
    lineStyle: { color: '#ff6600' }
  });
  myChart.setOption(option);
}

// Dynamically remove a mark point
function removeMarkPoint(index) {
  const option = myChart.getOption();
  option.series[0].markPoint.data.splice(index, 1);
  myChart.setOption(option);
}

Customizing Mark Element Styles

ECharts provides rich style configuration options, allowing complete customization of the appearance of mark lines and mark points:

markLine: {
  lineStyle: {
    type: 'solid',  // Solid, dashed, etc.
    width: 3,
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
        offset: 0, color: 'red'  // Gradient start color
      }, {
        offset: 1, color: 'blue'  // Gradient end color
      }]
    },
    opacity: 0.8
  },
  emphasis: {  // Highlight style
    lineStyle: {
      width: 5
    }
  }
}

markPoint: {
  symbol: 'path://M0,0L10,0L5,10Z',  // Custom SVG path
  symbolSize: 20,
  itemStyle: {
    color: '#fff',
    borderColor: '#000',
    borderWidth: 2,
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  },
  label: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    padding: [5, 10],
    borderRadius: 4,
    color: '#fff',
    fontSize: 14
  }
}

Application Techniques in Complex Scenarios

In complex charts, mark lines and mark points can be combined with other ECharts features to achieve more powerful effects:

1. Combining with Visual Mapping:

visualMap: {
  type: 'continuous',
  min: 0,
  max: 2000,
  inRange: {
    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
  }
},
series: [{
  markLine: {
    data: [{
      yAxis: 1000,
      lineStyle: {
        color: '#000'
      },
      label: {
        formatter: 'Baseline'
      }
    }]
  }
}]

2. Coordinating Marks Across Multiple Series:

series: [
  {
    name: 'Series 1',
    type: 'line',
    markPoint: {
      data: [{ type: 'max' }]
    }
  },
  {
    name: 'Series 2',
    type: 'line',
    markLine: {
      data: [{ type: 'average' }]
    }
  }
]

3. Marks in Polar Coordinate Charts:

angleAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
radiusAxis: {},
series: [{
  type: 'bar',
  data: [1, 2, 3, 4, 3, 2, 1],
  coordinateSystem: 'polar',
  markPoint: {
    data: [
      { name: 'Maximum', type: 'max' },
      { coord: ['Thu', 4], name: 'Thursday Peak' }
    ]
  }
}]

Performance Optimization Recommendations

When dealing with large datasets, excessive use of mark elements may impact performance. Here are some optimization tips:

1. Reduce unnecessary mark elements.
2. Simplify complex mark point graphics.
3. Use batch operations for dynamic updates.
4. Consider disabling some animation effects on mobile devices.

// Batch update example
function updateMarkers(newData) {
  const option = myChart.getOption();
  option.series.forEach(series => {
    series.markPoint = { data: newData.points };
    series.markLine = { data: newData.lines };
  });
  myChart.setOption(option, { lazyUpdate: true });  // Delayed merge optimization
}

Interaction and Event Handling

ECharts provides a comprehensive event system for mark elements, enabling user interaction responses:

myChart.on('click', function(params) {
  if (params.componentType === 'markLine') {
    console.log('Clicked mark line:', params.name);
  }
  if (params.componentType === 'markPoint') {
    console.log('Clicked mark point:', params.name);
  }
});

// Custom mark point click effects
markPoint: {
  data: [/*...*/],
  onClick: function(point) {
    alert('Clicked: ' + point.name);
  },
  itemStyle: {
    cursor: 'pointer'  // Mouse hover pointer style
  }
}

Responsive Design Considerations

The display of mark elements may need adjustments across different screen sizes:

// Responsive configuration
window.addEventListener('resize', function() {
  const width = window.innerWidth;
  const option = myChart.getOption();
  
  if (width < 768) {  // Mobile
    option.series.forEach(series => {
      if (series.markPoint) {
        series.markPoint.symbolSize = 15;
        series.markPoint.label.fontSize = 10;
      }
    });
  } else {  // Desktop
    option.series.forEach(series => {
      if (series.markPoint) {
        series.markPoint.symbolSize = 25;
        series.markPoint.label.fontSize = 14;
      }
    });
  }
  
  myChart.setOption(option);
});