ECharts：强大的数据可视化工具使用指南

vvilkin的学习备忘

于 2025-03-26 09:53:40 发布

阅读量1.1k

点赞数 15

分类专栏：现代WEB技术文章标签：信息可视化 echarts 前端

本文链接：https://blog.csdn.net/vvilkim/article/details/146028317

版权

现代WEB技术专栏收录该内容

30 篇文章

订阅专栏

在数据驱动的时代，数据可视化成为了理解和分析数据的重要手段。ECharts 是一个由百度开发的开源可视化库，它基于 JavaScript，提供了丰富的图表类型和强大的交互功能，非常适合用于 Web 应用程序中的数据展示。本文将介绍 ECharts 的基本概念、安装方法、使用步骤以及一些高级功能，帮助你快速上手并创建出令人惊艳的数据可视化图表。

什么是 ECharts？

ECharts 是一个功能强大的开源可视化库，主要用于创建交互式的图表和数据可视化。它支持多种图表类型，包括折线图、柱状图、饼图、散点图、地图、雷达图等，适用于各种数据展示场景。

主要特点：

丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。
移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。
深度的交互式数据探索: 提供了图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。
动态数据: 数据的改变驱动图表展现的改变。
绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
通过 GL 实现更多更强大绚丽的三维可视化: 在 VR，大屏场景里实现三维的可视化效果。
无障碍访问（4.0+）: 支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问！

安装 ECharts

通过 npm 安装（推荐）

如果你使用 npm 管理项目依赖，可以通过以下命令安装 ECharts：

npm install echarts

通过 CDN 引入

如果你不想使用 npm，也可以通过 CDN 引入 ECharts：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

基本使用步骤

1. 准备容器

在 HTML 中创建一个容器来放置图表：

<div id="main" style="width: 600px; height: 400px;"></div>

2. 初始化 ECharts 实例

在 JavaScript 中初始化 ECharts 实例：

// 获取容器
var myChart = echarts.init(document.getElementById('main'));

3. 配置图表选项

定义图表的配置项（option），包括标题、坐标轴、数据等：

var option = {
    title: {
        text: '示例图表'
    },
    tooltip: {}, // 提示框
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E'] // X 轴数据
    },
    yAxis: {}, // Y 轴
    series: [{
        name: '销量',
        type: 'bar', // 图表类型（柱状图）
        data: [5, 20, 36, 10, 10] // 数据
    }]
};

4. 渲染图表

将配置项应用到图表实例中：

myChart.setOption(option);

常用图表类型

ECharts 支持多种图表类型，以下是一些常见图表的配置示例：

1. 折线图

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

2. 柱状图

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

3. 饼图

var option = {
    series: [{
        type: 'pie',
        data: [
            { value: 335, name: 'A' },
            { value: 310, name: 'B' },
            { value: 234, name: 'C' },
            { value: 135, name: 'D' },
            { value: 1548, name: 'E' }
        ]
    }]
};

4. 散点图

var option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10, 20],
            [30, 40],
            [50, 60]
        ],
        type: 'scatter'
    }]
};

高级功能

1. 异步加载数据

通过 setOption 动态更新数据：

myChart.showLoading(); // 显示加载动画
fetch('data.json').then(response => response.json()).then(data => {
    myChart.hideLoading(); // 隐藏加载动画
    myChart.setOption({
        series: [{
            data: data
        }]
    });
});

2. 事件绑定

监听用户交互事件：

myChart.on('click', function (params) {
    console.log('点击了数据：', params);
});

3. 响应式布局

监听窗口大小变化，调整图表大小：

window.addEventListener('resize', function () {
    myChart.resize();
});

总结

ECharts 是一个功能强大且灵活的可视化工具，适合需要数据展示和交互的 Web 应用。通过本文的介绍，你应该已经掌握了 ECharts 的基本用法，并能够创建出各种常见的图表。

希望这篇指南能帮助你快速上手 ECharts，并在你的项目中实现出色的数据可视化效果！