📌 1. ECharts 基础示例
以下是使用 ECharts 创建基础图表的代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var chart = echarts.init(document.getElementById('main'));
var option = {
xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 15]
}]
};
chart.setOption(option);
</script>
</body>
</html>
📈 2. 常见图表类型展示
- 柱状图:如上例所示,适合对比数据
- 折线图:
type: 'line'
,用于趋势分析 - 饼图:
type: 'pie'
,展示比例分布 - 散点图:
type: 'scatter'
,适合数据相关性分析
🌐 3. 扩展学习资源
- 访问 ECharts 官方文档 获取完整 API 参考
- 查看 Python 数据可视化教程 学习其他工具
- 探索更多图表类型
📊 4. 实战技巧
- 使用
tooltip
属性增强交互体验 - 通过
dataZoom
实现数据范围缩放 - 利用
visualMap
进行数据颜色映射