ECharts图表基础使用与实战入门

芝士校园

于 2025-09-11 12:40:47 发布

阅读量398

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_42298254/article/details/151596421

本文还有配套的精品资源，点击获取

简介：ECharts是由百度开源的JavaScript数据可视化库，提供柱状图、折线图、饼图、散点图等多种图表类型，并支持地图、仪表盘等复杂图形展示。本内容围绕ECharts的简单使用展开，详细介绍了如何引入ECharts库、创建图表实例、配置图表参数，并通过示例演示了柱状图的实现过程。同时讲解了图表的交互功能设置、动态数据更新方法以及样式和动画的自定义方式，帮助开发者快速掌握ECharts在Web应用中的实际应用。
echarts图表简单使用

1. ECharts简介与引入方式

1.1 ECharts 的基本概念与应用场景

ECharts 是由百度开源的一款基于 JavaScript 的数据可视化库，专为 Web 应用中的图表展示而设计。其核心特性包括丰富的图表类型、良好的兼容性、高度可定制的交互能力，使其广泛应用于金融、电商、大数据分析等多个领域。无论是折线图、柱状图、饼图，还是热力图、地图、3D 图表，ECharts 都能提供出色的可视化支持。

在企业级应用中，ECharts 常用于构建数据看板、实时监控系统、报表分析平台等，帮助用户直观理解复杂数据。此外，它也适用于教育、科研等非商业领域，辅助可视化展示与分析。

2. 图表容器DOM元素准备与实例初始化

2.1 图表容器的创建与布局

ECharts 图表的绘制离不开一个具备明确大小的 DOM 容器。本节将深入讲解如何在 HTML 页面中创建图表容器，并通过 CSS 实现布局控制和响应式适配。

2.1.1 HTML 中创建 DOM 容器

ECharts 图表通常渲染在一个 <div> 元素中，该元素必须具有明确的宽度和高度，否则图表无法正常显示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts 容器示例</title>
    <style>
        #chart-container {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="chart-container"></div>
</body>
</html>

代码逻辑分析：

第 11 行定义了一个具有 id="chart-container" 的 <div> 元素，作为 ECharts 图表的容器。
第 7 行的 <style> 标签为该容器设置了宽度为 100%、高度为 400px 的样式，确保 ECharts 有明确的渲染空间。

参数说明：

width ：容器的宽度，可以是百分比、像素值或视口单位（如 vw）。
height ：容器的高度，通常设置为固定像素值，或通过 JavaScript 动态调整。

2.1.2 使用 CSS 控制容器大小与位置

容器的大小和位置对图表的展示效果至关重要。通过 CSS 可以灵活地控制容器的布局方式。

#chart-container {
    width: 800px;
    height: 600px;
    margin: 20px auto;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

代码逻辑分析：

width 和 height 设置为固定值，适用于固定布局。
margin: 20px auto; 使容器在页面中水平居中。
border 和 box-shadow 增强了容器的视觉表现，便于调试。

优化建议：

使用 Flexbox 或 Grid 布局，将图表容器嵌入到响应式布局中。
对于移动端，建议使用 vw 、 vh 或 rem 单位，以适配不同设备。

2.1.3 响应式布局适配不同屏幕尺寸

现代 Web 应用需要适配不同尺寸的设备屏幕。通过媒体查询和 JavaScript 可实现 ECharts 容器的响应式调整。

@media (max-width: 768px) {
    #chart-container {
        height: 300px;
    }
}

window.addEventListener('resize', function() {
    const chart = echarts.getInstanceByDom(document.getElementById('chart-container'));
    chart.resize();
});

代码逻辑分析：

第 1~4 行的 CSS 媒体查询，当屏幕宽度小于 768px 时，图表容器高度调整为 300px。
第 6~10 行 JavaScript 监听窗口的 resize 事件，并调用 chart.resize() 方法，确保图表在窗口变化时自动调整尺寸。

流程图展示：

graph TD
    A[窗口大小变化] --> B{图表实例是否存在}
    B -->|存在| C[调用 resize() 方法]
    B -->|不存在| D[跳过]
    C --> E[图表自动适配新尺寸]

2.2 图表实例的初始化流程

创建好 DOM 容器之后，下一步是初始化 ECharts 图表实例。本节将详细介绍初始化流程、多实例管理以及资源回收策略。

2.2.1 初始化的基本语法

ECharts 提供了 echarts.init() 方法用于初始化图表实例。

// 获取 DOM 容器
const container = document.getElementById('chart-container');

// 初始化图表实例
const chart = echarts.init(container);

// 设置图表配置项
const option = {
    title: { text: '示例图表' },
    tooltip: {},
    xAxis: { data: ['A', 'B', 'C', 'D'] },
    yAxis: {},
    series: [{ type: 'bar', data: [10, 20, 30, 40] }]
};

// 渲染图表
chart.setOption(option);

代码逻辑分析：

第 3 行通过 document.getElementById() 获取 DOM 容器。
第 6 行使用 echarts.init() 创建图表实例。
第 10~20 行定义图表的配置对象 option 。
第 23 行调用 setOption() 方法渲染图表。

参数说明：

echarts.init(dom, theme, opts) ：
dom ：图表容器 DOM 元素。
theme ：可选的主题名称或主题对象。
opts ：可选的配置参数，如渲染模式（canvas 或 svg）。

2.2.2 多图表实例的管理

在一个页面中同时展示多个图表时，需要合理管理多个实例，避免内存泄漏和命名冲突。

const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));

const option1 = { /* 配置项 */ };
const option2 = { /* 配置项 */ };

chart1.setOption(option1);
chart2.setOption(option2);

优化建议：

将图表实例存储在对象或数组中，便于统一管理。
使用唯一 ID 区分不同图表容器，避免 DOM 获取错误。

const charts = {};
charts['chart1'] = echarts.init(document.getElementById('chart1'));
charts['chart2'] = echarts.init(document.getElementById('chart2'));

表格：多图表实例管理对比

管理方式	优点	缺点
全局变量存储	简单直观	易造成命名冲突
对象统一管理	结构清晰，易于扩展	初期设置稍复杂
组件化封装	适合大型项目，复用性强	学习成本较高

2.2.3 图表销毁与资源回收

当图表不再需要显示时，应调用 dispose() 方法释放资源，避免内存泄漏。

// 销毁特定图表实例
echarts.dispose(chart1);

// 销毁所有图表实例
echarts.getInstanceByDom(document.getElementById('chart-container')).dispose();

// 或者通过 DOM 获取实例再销毁
const chart = echarts.getInstanceByDom(document.getElementById('chart-container'));
if (chart) {
    chart.dispose();
}

代码逻辑分析：

echarts.dispose(chart) ：直接传入图表实例销毁。
echarts.getInstanceByDom(dom) ：通过 DOM 获取实例后再销毁。
if (chart) ：判断实例是否存在，防止空指针异常。

注意事项：

在 Vue、React 等框架中，应在组件卸载生命周期中调用 dispose() 。
避免频繁初始化与销毁，建议使用 setOption() 更新图表内容。

2.3 开发环境搭建与调试技巧

为了高效开发 ECharts 图表，搭建良好的开发环境和掌握调试技巧至关重要。

2.3.1 浏览器开发者工具使用

浏览器开发者工具是调试 ECharts 的关键工具之一。Chrome DevTools 提供了丰富的调试功能。

常用调试功能：

Elements 面板 ：查看 DOM 元素是否正确加载。
Console 面板 ：查看 JavaScript 错误信息。
Network 面板 ：监控资源加载情况，如 ECharts.js 文件。
Sources 面板 ：设置断点调试初始化流程。

调试技巧：

在 echarts.init() 之后打印实例对象，验证是否创建成功。
使用 console.log(chart) 输出图表实例，查看其内部属性和方法。

2.3.2 控制台调试图表加载问题

图表加载失败通常由以下几个原因导致：

DOM 容器未正确加载。
图表配置项格式错误。
ECharts 库未正确引入。

调试代码示例：

try {
    const chart = echarts.init(document.getElementById('chart-container'));
    if (!chart) throw new Error('图表初始化失败');
    chart.setOption(option);
} catch (e) {
    console.error(e.message);
}

错误排查流程图：

graph TD
    A[图表未显示] --> B{DOM 是否存在}
    B -->|否| C[检查 DOM ID 是否正确]
    B -->|是| D{echarts 是否加载}
    D -->|否| E[检查 ECharts 引入路径]
    D -->|是| F{配置项是否正确}
    F -->|否| G[检查 JSON 格式]
    F -->|是| H[其他错误]

2.3.3 模块化开发中引入 ECharts 的注意事项

在模块化项目（如 Vue、React、Webpack 等）中，引入 ECharts 时需注意以下几点：

使用 NPM 安装：

npm install echarts --save

引入 ECharts：

import * as echarts from 'echarts';

按需引入（推荐）：

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer]);

优缺点对比表：

引入方式	优点	缺点
全量引入	简单方便，适合小型项目	包体积大，影响加载速度
按需引入	减小包体积，提升性能	配置复杂，需手动注册模块
CDN 引入	快速部署，无需打包	依赖网络，无法离线使用

通过本章的学习，您已经掌握了 ECharts 图表容器的创建、实例初始化流程以及开发调试技巧。这些是构建 ECharts 图表的基础，为后续章节的图表配置与交互功能开发打下坚实基础。

3. 图表配置项（option）详解与核心组件设置

ECharts 的核心在于其高度可配置的 option 对象，它是整个图表渲染与交互行为的控制中心。理解 option 的结构及其各个组件的配置方式，是掌握 ECharts 图表开发的关键。本章将深入解析 option 的整体结构，并围绕 tooltip 、 legend 、 xAxis 、 yAxis 等核心组件展开详解，同时通过代码示例说明如何在实际开发中灵活配置图表行为与样式。

3.1 配置对象 option 的结构解析

3.1.1 option 的整体结构与作用

option 是 ECharts 图表的配置对象，它是一个 JSON 格式的对象，用于定义图表的各项参数和组件。其结构通常包括以下几个主要部分：

{
  "tooltip": {},
  "legend": {},
  "xAxis": {},
  "yAxis": {},
  "series": []
}

tooltip ：定义鼠标悬停提示信息的样式与行为。
legend ：图例，用于图例说明数据系列。
xAxis/yAxis ：坐标轴配置，定义坐标轴的类型、数据范围、刻度样式等。
series ：图表的核心数据，定义图表类型（如柱状图、折线图）、数据来源、样式等。

每个配置项都有其特定的属性和嵌套结构，理解其层级关系对于构建复杂图表至关重要。

3.1.2 必填项与可选配置的区别

在 option 配置中，某些字段是必须的，否则图表将无法正确渲染。例如：

series 是必须的，因为没有数据，图表无法显示。
某些图表类型如柱状图、折线图需要 xAxis 和 yAxis 来映射数据。
series.type 是必须的，用于指定图表类型。

而像 tooltip 、 legend 等组件则是可选的，可以根据需要添加或省略。

3.1.3 JSON 配置文件的组织方式

为了提高可维护性，通常会将 option 配置拆分为多个 JSON 文件，或通过模块化方式组织：

// config/option.js
export default {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销售额', '利润']
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [120, 200, 150]
    },
    {
      name: '利润',
      type: 'bar',
      data: [60, 100, 70]
    }
  ]
}

这种方式不仅便于调试和维护，也便于多人协作和配置复用。

3.2 核心组件配置详解

3.2.1 tooltip 提示功能配置

3.2.1.1 显示格式与触发方式

tooltip 控制鼠标悬停时的提示信息显示。常见的配置包括触发方式、显示位置和格式化内容。

tooltip: {
  trigger: 'axis', // 触发方式：'item'（单项）或 'axis'（坐标轴）
  axisPointer: {
    type: 'shadow' // 指针类型，'line'、'shadow'、'none'
  },
  formatter: '{a}<br/>{b}: {c}万元 (环比 {d}%)' // 自定义格式
}

trigger ：决定提示信息的触发方式。 'axis' 表示当鼠标在坐标轴上移动时显示所有系列的提示。
axisPointer.type ：设置坐标轴指示器的类型。
formatter ：自定义提示信息格式，支持使用模板变量如 {a} 、 {b} 、 {c} 等。

3.2.1.2 自定义 tooltip 样式与内容

可以通过 backgroundColor 、 borderColor 、 textStyle 等属性来控制 tooltip 的外观：

tooltip: {
  backgroundColor: '#333',
  borderColor: '#fff',
  textStyle: {
    color: '#fff'
  },
  formatter: (params) => {
    return `${params[0].name}<br/>` +
           `${params[0].seriesName}: ${params[0].value}万元<br/>` +
           `${params[1].seriesName}: ${params[1].value}万元`;
  }
}

此示例中， formatter 使用函数形式，接受 params 数组（每个元素对应一个系列的数据），从而实现更灵活的内容展示。

3.2.2 图例（legend）设置

3.2.2.1 图例位置与排列方式

legend 用于图例说明，通常放置在图表上方或右侧。

legend: {
  data: ['销售额', '利润'],
  top: '10%', // 距离顶部百分比
  left: 'center', // 水平居中
  orient: 'horizontal' // 排列方向：'horizontal' 或 'vertical'
}

data ：图例项名称数组，必须与 series.name 对应。
top/left/right/bottom ：控制图例位置。
orient ：排列方向。

3.2.2.2 图例数据与样式控制

可以设置图例的字体大小、颜色、图标样式等：

legend: {
  data: ['销售额', '利润'],
  textStyle: {
    fontSize: 14,
    color: '#666'
  },
  icon: 'circle', // 图标形状：'circle', 'rect', 'roundRect'
  itemWidth: 12, // 图标宽度
  itemHeight: 12 // 图标高度
}

这些样式设置可增强图表的可读性和视觉一致性。

3.2.3 坐标轴（xAxis/yAxis）配置

3.2.3.1 坐标轴类型与数据映射

ECharts 支持多种坐标轴类型，如 category 、 value 、 time 、 log 等。

xAxis: {
  type: 'category',
  data: ['一月', '二月', '三月']
},
yAxis: {
  type: 'value',
  name: '金额（万元）'
}

type ：定义坐标轴类型。 category 用于分类轴， value 用于数值轴。
data ：用于 category 类型，定义分类标签。
name ：轴名称，显示在轴旁边。

3.2.3.2 轴线样式与刻度控制

可以设置坐标轴的线条颜色、宽度、刻度间隔等：

yAxis: {
  type: 'value',
  splitLine: {
    lineStyle: {
      color: '#ccc',
      width: 1
    }
  },
  axisLine: {
    lineStyle: {
      color: '#999'
    }
  },
  axisTick: {
    alignWithLabel: true
  }
}

splitLine ：网格线设置。
axisLine ：坐标轴线样式。
axisTick.alignWithLabel ：是否与标签对齐。

3.3 图表系列（series）定义

3.3.1 系列类型与数据绑定

series 是图表的核心数据配置，定义了图表类型、数据来源、样式等。

series: [
  {
    name: '销售额',
    type: 'bar',
    data: [120, 200, 150],
    itemStyle: {
      color: '#5470c6'
    }
  },
  {
    name: '利润',
    type: 'bar',
    data: [60, 100, 70],
    itemStyle: {
      color: '#91cc75'
    }
  }
]

name ：系列名称，需与 legend.data 对应。
type ：图表类型，如 'bar' 、 'line' 、 'pie' 等。
data ：数据数组。
itemStyle ：设置系列项的样式，如颜色。

3.3.2 多系列图表的组合与交互

ECharts 支持在同一图表中展示多个系列，并支持交互行为。

series: [
  {
    name: '销售额',
    type: 'bar',
    data: [120, 200, 150],
    stack: '总量' // 设置堆叠组名
  },
  {
    name: '利润',
    type: 'bar',
    data: [60, 100, 70],
    stack: '总量'
  }
]

stack ：将多个系列堆叠显示，常用于堆叠柱状图。

结合 tooltip.trigger: 'axis' ，可以在鼠标移动时同时显示所有系列的数据。

3.3.3 数据格式化与动态绑定技巧

ECharts 支持通过函数动态设置数据样式或格式：

series: [
  {
    name: '销售额',
    type: 'bar',
    data: [120, 200, 150],
    label: {
      show: true,
      position: 'top',
      formatter: (params) => {
        return params.value + '万元';
      }
    }
  }
]

label.formatter ：使用函数动态返回标签内容，增强数据展示灵活性。

此外，还可以通过监听事件（如 click ）来实现数据联动：

myChart.on('click', function(params) {
  console.log('点击的系列名称：', params.seriesName);
  console.log('点击的数据值：', params.value);
});

通过这些技巧，可以实现更复杂的数据交互与动态更新功能。

本章从 option 的整体结构出发，逐步解析了 tooltip 、 legend 、 xAxis 、 yAxis 等核心组件的配置方法，并通过代码示例展示了如何在实际开发中灵活控制图表的交互行为与视觉表现。下一章节将继续深入探讨具体图表类型的设计与实现。

4. 柱状图设计与实现及图表交互功能

4.1 柱状图的设计思路与实现步骤

4.1.1 基础柱状图的配置与渲染

柱状图（Bar Chart）是 ECharts 中最基础也是最常用的图表类型之一，适用于展示不同类别之间的数据对比。其核心在于通过 xAxis 和 yAxis 来定义数据坐标轴，并通过 series 来定义柱状图系列。

基础配置示例：

<div id="barChart" style="width: 600px; height: 400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('barChart'));

    var option = {
        title: {
            text: '基础柱状图示例'
        },
        tooltip: {},
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: [120, 200, 150, 80, 70]
        }]
    };

    myChart.setOption(option);
</script>

代码逻辑分析：

title.text ：设置图表标题。
tooltip ：启用提示框，当鼠标悬停在柱状图上时显示数据。
xAxis.data ：设置 X 轴的分类数据，即每个柱子对应的数据类别。
yAxis.type ：设置 Y 轴为数值型（value）。
series.type ：设置图表类型为 bar 。
series.data ：绑定柱状图的数值数据。

进阶理解：

可以通过 xAxis.type 设置为 category 来显式定义分类轴。
series 可以配置 barWidth 来调整柱子宽度， itemStyle 控制颜色、圆角等样式。

4.1.2 堆叠柱状图与分组柱状图实现

在实际应用中，往往需要展示多个系列的柱状图进行对比或堆叠。例如，分组柱状图用于并列展示不同系列的数据，而堆叠柱状图则用于显示数据的总和。

示例：堆叠柱状图

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    legend: {
        data: ['系列1', '系列2']
    },
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '系列1',
            type: 'bar',
            stack: '总量',
            data: [120, 130, 100, 80, 70]
        },
        {
            name: '系列2',
            type: 'bar',
            stack: '总量',
            data: [100, 90, 120, 140, 130]
        }
    ]
};

说明：

stack: '总量' ：将两个柱状图系列堆叠在一起。
legend.data ：图例显示两个系列名称。
tooltip.trigger ：设置提示框触发方式为 axis ，鼠标悬停时显示所有系列数据。

分组柱状图实现

只需要去掉 stack 配置，ECharts 默认会以并列形式展示多个系列。

4.1.3 动态数据绑定与更新策略

在实际业务中，数据往往是动态变化的。ECharts 支持通过 setOption 方法动态更新数据。

示例：定时更新柱状图数据

function updateData() {
    const newData = [Math.random() * 200, Math.random() * 200, Math.random() * 200, Math.random() * 200, Math.random() * 200];
    myChart.setOption({
        series: [{
            data: newData
        }]
    });
}

setInterval(updateData, 2000);

参数说明：

Math.random() * 200 ：生成 0~200 的随机数作为新数据。
setInterval ：每 2 秒调用一次 updateData 方法。

这种方式常用于实时监控系统中，比如服务器 CPU 使用率、内存占用等。

4.2 图表交互功能的实现

4.2.1 点击事件与数据联动

ECharts 支持丰富的交互事件绑定，其中点击事件是实现图表联动的核心。

示例：点击柱状图显示详细信息

myChart.on('click', function(params) {
    console.log('点击的柱状图数据：', params);
    alert(`你点击了 ${params.name}，数值为：${params.value}`);
});

参数说明：

params.name ：当前点击的分类名称（如 A、B）。
params.value ：当前点击的柱状图数值。
params.seriesName ：系列名称。

可以结合 Vue、React 等框架实现点击后跳转页面、更新其他图表等功能。

4.2.2 缩放与拖动交互操作

ECharts 支持通过内置组件 dataZoom 实现图表缩放与拖动交互，尤其适用于数据量较大的场景。

示例：添加 dataZoom 实现缩放功能

option = {
    // ... 其他配置不变
    dataZoom: [
        {
            type: 'slider',
            start: 20,
            end: 80
        },
        {
            type: 'inside',
            start: 20,
            end: 80
        }
    ]
};

配置说明：

type: 'slider' ：外部滑块形式的缩放条。
type: 'inside' ：内置缩放区域，通过鼠标滚轮或拖动缩放。
start / end ：初始缩放范围（百分比）。

4.2.3 鼠标悬停与高亮效果设置

ECharts 提供了丰富的交互反馈机制，如高亮、淡出、悬停提示等。

示例：高亮某个柱子

myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 2
});

说明：

type: 'highlight' ：高亮动作。
seriesIndex ：指定系列索引（从 0 开始）。
dataIndex ：指定该系列中第几个数据项高亮。

可以结合 mouseover 事件，实现鼠标悬停自动高亮。

4.3 图表样式与动画自定义

4.3.1 主题切换与样式定制

ECharts 支持通过 theme 和 itemStyle 自定义图表样式。

示例：自定义柱状图颜色与圆角

series: [{
    type: 'bar',
    itemStyle: {
        color: '#ff7300',
        borderRadius: 5
    },
    data: [120, 200, 150, 80, 70]
}]

说明：

itemStyle.color ：设置柱状图颜色。
itemStyle.borderRadius ：设置柱子圆角，实现“圆柱”效果。

可使用渐变色、图片纹理等复杂样式。

4.3.2 过渡动画与时序控制

ECharts 提供了强大的动画支持，可通过 animation 配置项控制图表的渲染动画。

示例：配置动画持续时间与缓动函数

option = {
    animation: true,
    animationDuration: 1000,
    animationEasing: 'elasticOut',
    series: [{
        type: 'bar',
        data: [120, 200, 150, 80, 70]
    }]
};

参数说明：

animation ：是否启用动画。
animationDuration ：动画持续时间（毫秒）。
animationEasing ：缓动函数，支持 linear 、 bounce 、 elasticOut 等。

4.3.3 使用 CSS 与 SVG 实现图表样式增强

ECharts 支持通过 SVG 渲染图形，也可以结合 CSS 控制图表整体样式。

示例：通过 CSS 控制提示框样式

.echarts-tooltip {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
}

该 CSS 会全局影响所有 ECharts 提示框的样式。

4.4 地图与仪表盘图表介绍

4.4.1 地理数据可视化实现

ECharts 提供了强大的地理数据可视化支持，可以轻松实现地图热力图、区域分布图等。

示例：中国地图热力图

var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: true
    },
    series: [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        data: [
            { name: '北京', value: 500 },
            { name: '上海', value: 800 },
            { name: '广东', value: 700 }
        ]
    }]
};

说明：

mapType: 'china' ：使用内置的中国地图。
visualMap ：设置颜色映射范围，用于热力图。
series.data ：绑定地图数据。

4.4.2 仪表盘图表配置与应用

仪表盘（Gauge）常用于展示进度、指标等场景，如 CPU 使用率、销售额完成度等。

示例：基础仪表盘配置

option = {
    tooltip: {
        formatter: '{a}<br/>{b}: {c}%'
    },
    series: [{
        name: '速度',
        type: 'gauge',
        detail: { formatter: '{value}%' },
        data: [{ value: 75, name: '完成度' }]
    }]
};

参数说明：

detail.formatter ：设置仪表盘中心显示的文本格式。
data.value ：当前数值。
data.name ：显示的指标名称。

4.4.3 自定义图表类型与插件扩展

ECharts 支持通过插件机制扩展图表类型，如引入 echarts-wordcloud 插件实现词云图。

示例：引入词云插件

npm install echarts-wordcloud

import * as echarts from 'echarts';
import wordCloud from 'echarts-wordcloud';

wordCloud(echarts); // 注册插件

const option = {
    series: [{
        type: 'wordCloud',
        shape: 'circle',
        data: [
            { name: 'JavaScript', value: 15 },
            { name: 'ECharts', value: 10 },
            { name: 'Vue', value: 8 }
        ]
    }]
};

说明：

shape ：词云形状，支持 circle 、 cardioid 等。
data.name ：词语名称。
data.value ：权重值，决定词的大小。

本章深入讲解了柱状图的设计与实现，涵盖了基础配置、交互事件、样式定制、地图与仪表盘图表等内容，并通过代码实例和配置说明帮助开发者掌握 ECharts 的高级用法。

5. ECharts实战应用与多图表组合展示

5.1 ECharts 实战开发流程概述

ECharts 的实战应用并不仅仅是画出一个漂亮的图表，而是要结合业务逻辑，完成从数据采集、处理、可视化到交互的一整套流程。一个完整的 ECharts 实战开发流程可以分为以下几个阶段：

5.1.1 从需求分析到图表选型

在开发初期，首先要明确业务需求。例如：用户希望看到销售数据的趋势图、不同区域的分布情况、还是实时的监控数据？根据不同的需求选择合适的图表类型，如柱状图、折线图、饼图、热力图、地图等。

图表选型建议表：

需求类型	推荐图表类型
趋势变化	折线图、面积图
数据分布	柱状图、箱型图
比例关系	饼图、环图
地理分布	地图（geo）
多维数据对比	雷达图、热力图
实时数据监控	动态折线图、仪表盘

5.1.2 数据准备与接口对接

ECharts 图表需要依赖结构化数据，通常从后端 API 接口获取。例如：

fetch('/api/sales-data')
  .then(response => response.json())
  .then(data => {
    // 处理数据并渲染图表
    renderChart(data);
  });

在实际开发中，数据格式通常需要转换为 ECharts 可接受的形式。例如：

{
  "categories": ["一月", "二月", "三月", "四月"],
  "series": [
    { "name": "产品A", "data": [120, 132, 101, 134] },
    { "name": "产品B", "data": [80, 92, 44, 70] }
  ]
}

5.1.3 页面渲染与性能优化

页面渲染时，建议使用懒加载策略，在图表容器进入视口后再初始化图表，避免一次性加载过多资源。此外，还可以使用 ECharts 提供的 setOption 方法进行增量更新，提升性能。

const chart = echarts.init(document.getElementById('chart-container'));
chart.setOption({
  xAxis: {
    type: 'category',
    data: data.categories
  },
  yAxis: {},
  series: data.series.map(item => ({
    name: item.name,
    type: 'bar',
    data: item.data
  }))
});

5.2 多图表组合展示与数据联动

在企业级数据看板中，往往需要多个图表协同展示，形成一个完整的数据视图。

5.2.1 多个图表之间的数据关联

ECharts 支持多个图表实例之间的联动。例如，点击一个饼图，可以联动更新柱状图的数据。

const pieChart = echarts.init(document.getElementById('pie-chart'));
const barChart = echarts.init(document.getElementById('bar-chart'));

pieChart.on('click', function(params) {
  // 根据点击的饼图数据，更新柱状图
  const selectedData = filterDataByCategory(params.name);
  barChart.setOption({
    series: [{
      data: selectedData
    }]
  });
});

5.2.2 共享 tooltip 与联动交互

ECharts 提供了 connect 方法，可以将多个图表实例连接，实现共享 tooltip 和联动缩放。

echarts.connect([pieChart, barChart]);

这样，当在一个图表中缩放或悬停时，另一个图表也会同步显示相同的数据点。

5.2.3 综合布局与组件协同设计

在实际项目中，常常需要使用多个 ECharts 图表和 UI 组件（如按钮、下拉框）协同工作。例如，通过下拉框选择时间范围，触发多个图表的数据更新。

<select id="time-range">
  <option value="day">今日</option>
  <option value="week">本周</option>
  <option value="month">本月</option>
</select>

<script>
  document.getElementById('time-range').addEventListener('change', function() {
    const range = this.value;
    fetchDataByRange(range).then(data => {
      pieChart.setOption({ series: data.pie });
      barChart.setOption({ series: data.bar });
    });
  });
</script>

5.3 动态数据加载与更新机制

在实时数据展示场景中，动态数据加载和更新是关键。

5.3.1 异步加载数据的方式

除了使用 fetch 获取数据外，也可以使用 axios 等库进行更复杂的请求。

axios.get('/api/realtime-data').then(response => {
  chart.setOption({
    series: [{
      data: response.data.values
    }]
  });
});

5.3.2 定时刷新与数据增量更新

为了展示最新数据，可使用 setInterval 定时刷新图表：

setInterval(() => {
  fetchData().then(newData => {
    chart.setOption({
      series: [{
        data: newData
      }]
    });
  });
}, 5000);

增量更新可以使用 data.push() 方法，保留历史数据并追加新值：

const seriesData = [100, 120, 130];
seriesData.push(newData);

5.3.3 使用 WebSocket 实现实时数据推送

WebSocket 是实现实时数据更新的高效方式。示例如下：

const ws = new WebSocket('wss://your-data-stream');

ws.onmessage = function(event) {
  const data = JSON.parse(event.data);
  chart.setOption({
    series: [{
      data: data.values
    }]
  });
};

5.4 项目实战案例解析

5.4.1 企业数据看板开发实践

一个典型的企业数据看板包含销售额、用户增长、地区分布、实时订单等多个图表模块。通过 ECharts 的模块化配置和组件化设计，可以实现统一的数据管理和交互控制。

5.4.2 移动端图表适配方案

移动端适配建议使用 rem 布局 + echarts.init(dom, null, { devicePixelRatio: window.devicePixelRatio }) 来优化图表清晰度。

window.addEventListener('resize', () => {
  chart.resize();
});

5.4.3 性能优化与图表渲染效率提升

减少图表实例数量 ：避免在页面中创建过多图表实例。
使用 canvas 渲染 ：在数据量大时，切换为 canvas 模式提升性能。
数据聚合与采样 ：大数据量时使用聚合函数或采样处理。

// 使用 canvas 渲染
const chart = echarts.init(document.getElementById('chart'), null, { renderer: 'canvas' });

（以下为章节内容继续延伸，但按照要求不输出总结性语句）

本文还有配套的精品资源，点击获取