Echarts图表在线案例库：海量实用图表模板与实战技巧分享

引言

ECharts 是一个由百度开源的数据可视化库，以其强大的功能、丰富的图表类型和灵活的配置项而广受开发者喜爱。无论是简单的柱状图、折线图，还是复杂的3D图表、热力图，ECharts 都能轻松应对。本文将为您详细介绍 ECharts 的在线案例库，分享海量实用图表模板，并深入探讨实战技巧，帮助您快速上手并高效应用 ECharts。

一、ECharts 在线案例库概览

ECharts 官方提供了丰富的在线案例库，涵盖了从基础图表到高级交互图表的各类示例。这些案例不仅展示了 ECharts 的强大功能，还提供了可直接复制使用的代码，是学习和参考的绝佳资源。

1.1 官方案例库地址

ECharts 官方示例：https://echarts.apache.org/examples/zh/index.html
ECharts 社区案例：https://gallery.echartsjs.com/

1.2 案例库分类

ECharts 案例库通常按以下分类组织：

基础图表：折线图、柱状图、饼图、散点图等。
高级图表：热力图、树图、桑基图、平行坐标系等。
3D图表：3D柱状图、3D散点图、3D曲面图等。
交互图表：动态数据更新、拖拽重计算、图例切换等。
行业应用：地理地图、金融图表、仪表盘等。

1.3 如何使用案例库

浏览案例：在案例库中找到您需要的图表类型。
查看代码：点击案例进入详情页，查看完整的 HTML、CSS 和 JavaScript 代码。
复制代码：将代码复制到您的项目中，根据需求进行修改。
在线调试：使用 ECharts 官方提供的在线编辑器（如 CodePen、JSFiddle）进行实时调试。

二、海量实用图表模板分享

以下是一些常用的 ECharts 图表模板，您可以直接复制使用或根据需求进行修改。

2.1 基础柱状图

柱状图是最常用的图表之一，用于比较不同类别的数据。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基础柱状图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '基础柱状图',
                left: 'center'
            },
            tooltip: {},
            legend: {
                data:['销量'],
                top: 30
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

代码说明：

xAxis：定义 X 轴的数据类别。
series：定义数据系列，type: 'bar' 表示柱状图。
data：对应每个类别的数值。

2.2 动态折线图

折线图常用于展示数据随时间或其他连续变量的变化趋势。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态折线图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        // 模拟动态数据
        var data = [];
        var now = new Date();
        var value = 100;
        for (var i = 0; i < 100; i++) {
            data.push({
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + ' ' + [now.getHours(), now.getMinutes(), now.getSeconds()].join(':'),
                    value
                ]
            });
            now = new Date(+now - 1000);
            value = Math.round((Math.random() - 0.5) * 20 + value);
        }

        var option = {
            title: {
                text: '动态折线图',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds() + '<br/>' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };

        myChart.setOption(option);

        // 动态更新数据
        setInterval(function () {
            var now = new Date();
            var value = Math.round((Math.random() - 0.5) * 20 + value);
            data.shift();
            data.push({
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + ' ' + [now.getHours(), now.getMinutes(), now.getSeconds()].join(':'),
                    value
                ]
            });
            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);
    </script>
</body>
</html>

代码说明：

使用 setInterval 定时器模拟动态数据更新。
xAxis 设置为 type: 'time'，以支持时间轴。
series 中的 type: 'line' 表示折线图。

2.3 饼图与环形图

饼图用于展示各部分占总体的比例，环形图是饼图的变体，中间可添加文字。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>饼图与环形图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: '饼图与环形图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ]
                }
            ]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

代码说明：

第一个 series 是饼图，radius: '50%' 表示半径。
第二个 series 是环形图，radius: ['40%', '70%'] 表示内半径和外半径。
emphasis 用于定义鼠标悬停时的样式。

2.4 地理地图

ECharts 支持多种地图类型，包括中国地图、世界地图等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>中国地图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/js/china.js"></script>
</head>
<body>
    <div id="main" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: '中国地图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (亿元)'
            },
            visualMap: {
                min: 0,
                max: 2500,
                text: ['高', '低'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['#50a3ba', '#eac736', '#d94e5d']
                }
            },
            series: [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    roam: true,
                    label: {
                        show: true
                    },
                    data: [
                        {name: '北京', value: 199},
                        {name: '天津', value: 42},
                        {name: '上海', value: 142},
                        {name: '重庆', value: 44},
                        {name: '河北', value: 147},
                        {name: '河南', value: 229},
                        {name: '云南', value: 57},
                        {name: '辽宁', value: 168},
                        {name: '黑龙江', value: 115},
                        {name: '湖南', value: 175},
                        {name: '安徽', value: 117},
                        {name: '山东', value: 189},
                        {name: '新疆', value: 19},
                        {name: '江苏', value: 139},
                        {name: '浙江', value: 104},
                        {name: '江西', value: 91},
                        {name: '湖北', value: 129},
                        {name: '广西', value: 59},
                        {name: '甘肃', value: 56},
                        {name: '山西', value: 107},
                        {name: '内蒙古', value: 37},
                        {name: '陕西', value: 116},
                        {name: '吉林', value: 51},
                        {name: '福建', value: 100},
                        {name: '贵州', value: 50},
                        {name: '广东', value: 154},
                        {name: '青海', value: 10},
                        {name: '西藏', value: 0},
                        {name: '四川', value: 119},
                        {name: '宁夏', value: 18},
                        {name: '海南', value: 25},
                        {name: '台湾', value: 0},
                        {name: '香港', value: 0},
                        {name: '澳门', value: 0}
                    ]
                }
            ]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

代码说明：

需要引入 china.js 地图文件。
mapType: 'china' 指定为中国地图。
roam: true 允许用户拖拽和缩放地图。
visualMap 用于根据数值显示不同的颜色。

三、实战技巧分享

3.1 响应式布局

ECharts 图表默认不是响应式的，需要手动处理窗口大小变化。

// 监听窗口大小变化
window.addEventListener('resize', function() {
    myChart.resize();
});

3.2 数据更新

ECharts 支持动态更新数据，可以通过 setOption 方法更新。

// 更新数据
myChart.setOption({
    series: [{
        data: [10, 20, 30, 40, 50]
    }]
});

3.3 交互事件

ECharts 提供了丰富的交互事件，如点击、悬停等。

// 点击事件
myChart.on('click', function(params) {
    console.log(params);
    // params.seriesName, params.name, params.value
});

// 悬停事件
myChart.on('mouseover', function(params) {
    console.log('鼠标悬停在：' + params.name);
});

3.4 自定义主题

ECharts 支持自定义主题，可以通过 registerTheme 方法注册。

// 注册自定义主题
echarts.registerTheme('myTheme', {
    color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed'],
    backgroundColor: '#f5f5f5',
    textStyle: {
        fontFamily: 'Arial'
    }
});

// 使用自定义主题
var myChart = echarts.init(document.getElementById('main'), 'myTheme');

3.5 性能优化

对于大数据量图表，ECharts 提供了性能优化选项。

var option = {
    series: [{
        type: 'scatter',
        large: true, // 开启大数据量优化
        largeThreshold: 2000, // 大数据量阈值
        progressive: 400, // 渐进式渲染
        progressiveThreshold: 3000
    }]
};

3.6 与框架集成

ECharts 可以与 Vue、React 等前端框架集成。

Vue 集成示例

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'EChartsComponent',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: 'Vue 中的 ECharts',
          left: 'center'
        },
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [{
          type: 'bar',
          data: [10, 20, 30, 40, 50]
        }]
      };
      chart.setOption(option);
    }
  }
};
</script>

四、常见问题与解决方案

4.1 图表不显示

问题：图表容器未设置宽高。 解决方案：确保容器有明确的宽高，如 style="width: 600px; height: 400px;"。

4.2 数据更新不生效

问题：使用 setOption 时未正确更新数据。 解决方案：确保 setOption 的参数正确，可以使用 merge 选项合并配置。

myChart.setOption(newOption, true); // 第二个参数为 true 表示合并配置

4.3 地图不显示

问题：未正确引入地图文件。 解决方案：确保引入对应的地图文件，如 china.js，并检查网络请求是否成功。

4.4 内存泄漏

问题：频繁创建和销毁图表实例。 解决方案：在组件销毁时调用 dispose 方法。

// Vue 组件销毁时
beforeDestroy() {
    if (this.chart) {
        this.chart.dispose();
    }
}

五、进阶技巧

5.1 自定义图形

ECharts 支持通过 graphic 组件自定义图形元素。

var option = {
    graphic: [{
        type: 'circle',
        shape: {
            cx: 100,
            cy: 100,
            r: 50
        },
        style: {
            fill: 'rgba(255,0,0,0.5)'
        }
    }]
};

5.2 混合图表

ECharts 支持混合多种图表类型。

var option = {
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [
        {
            type: 'bar',
            data: [10, 20, 30, 40, 50]
        },
        {
            type: 'line',
            data: [10, 20, 30, 40, 50],
            yAxisIndex: 0
        }
    ]
};

5.3 数据集（Dataset）

ECharts 4.0 引入了数据集（Dataset）功能，便于数据管理。

var option = {
    dataset: {
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' }
    ]
};

5.4 异步数据加载

在实际项目中，数据通常来自后端 API。

// 使用 fetch 获取数据
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        const chart = echarts.init(document.getElementById('main'));
        const option = {
            xAxis: { data: data.categories },
            yAxis: {},
            series: [{
                type: 'bar',
                data: data.values
            }]
        };
        chart.setOption(option);
    })
    .catch(error => console.error('Error fetching data:', error));

六、总结

ECharts 是一个功能强大且灵活的数据可视化库，通过官方案例库和社区资源，您可以快速找到所需的图表模板和实战技巧。本文介绍了 ECharts 的在线案例库、常用图表模板、实战技巧以及常见问题的解决方案。希望这些内容能帮助您更好地使用 ECharts，创建出美观、实用的数据可视化图表。

参考资源

通过不断学习和实践，您将能够充分利用 ECharts 的强大功能，为您的项目增添光彩。祝您在数据可视化的道路上越走越远！