以下是使用 TypeScript 和 Echarts 框架实现平滑折线图的示例代码:
import * as echarts from 'echarts';
// 模拟生成1000个时间和电流数据
const dataCount = 1000;
const timeData: number[] = [];
const currentData: number[] = [];
for (let i = 0; i < dataCount; i++) {
const time = Math.floor(Math.random() * 1001); // 随机生成时间微秒,范围为0-1000
const current = Math.floor(Math.random() * 5000) + 1; // 随机生成电流值,范围为1-5000
timeData.push(time);
currentData.push(current);
}
// 创建echarts实例
const chartContainer = document.getElementById('chart-container');
const myChart = echarts.init(chartContainer);
// 配置折线图选项
const option: echarts.EChartsOption = {
title: {
text: '被雷击的电流图',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
name: '时间微秒'
},
yAxis: {
type: 'value',
name: '电流'
},
series: [
{
type: 'line',
smooth: true, // 平滑曲线
data: currentData
}
]
};
// 渲染折线图
myChart.setOption(option);
这段代码模拟生成了1000个随机的时间和电流数据,并利用 Echarts 框架创建了一个平滑折线图展示被雷击的电流情况。请确保已安装 Echarts 并在 HTML 页面中添加一个具有 id "chart-container" 的容器元素来显示图表。
内容由零声教学AI助手提供,问题来源于学员提问




