📌 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',适合数据相关性分析
ECharts_柱状图示例

🌐 3. 扩展学习资源

📊 4. 实战技巧

  • 使用 tooltip 属性增强交互体验
  • 通过 dataZoom 实现数据范围缩放
  • 利用 visualMap 进行数据颜色映射
ECharts_折线图趋势分析