D3折线图Web Component是一个基于D3.js的自定义Web组件，提供了简单易用的API来创建交互式折线图。它支持动画、关键点标记、自定义刻度、大数值处理等多种功能，并且优化了性能以处理大量数据点。
该组件使用现代Web技术（Web Components、Canvas、SVG等）构建，兼容所有主流现代浏览器。
通过简洁的API快速创建美观的折线图，无需复杂配置。
提供丰富的配置选项，可以自定义颜色、动画、文本样式等。
支持在折线上添加自定义HTML内容的关键点，突出重要数据。
可以在X轴上添加自定义文本的刻度点，提高可读性。
自动将大数值格式化为更易读的形式（如10K、1M等）。
内置数据抽稀算法和混合渲染技术，提高大数据量下的性能。
# 使用npm
npm install d3-line-chart
# 使用pnpm
pnpm add d3-line-chart
# 使用yarn
yarn add d3-line-chart<!-- 引入D3.js -->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<!-- 引入d3-line-chart -->
<script src="path/to/d3-line-chart.min.js"></script>
<!-- 在HTML中使用 -->
<d3-line-chart id="my-chart"></d3-line-chart>
<script>
// 获取图表实例
const chart = document.getElementById('my-chart');
// 设置数据
chart.setData([
{ x: 0, y: 10 },
{ x: 1, y: 15 },
{ x: 2, y: 8 },
{ x: 3, y: 20 },
{ x: 4, y: 12 }
]);
// 设置配置
chart.setConfig({
lineColor: '#3498db',
showShadow: true,
gridColor: '#e0e0e0',
curveType: 'curve' // 使用曲线绘制
});
</script>