📚 课程目录第2章 ECharts基础入门

ECharts图表参数配置与SQL查询数据联动 - 第2节

2.1 ECharts 简介：数据可视化与商业智能的桥梁

ECharts（Enterprise Charts）是由百度开源、Apache 基金会孵化的纯 JavaScript 图表库。它基于 Canvas 渲染，兼容绝大多数现代浏览器，提供直观、交互丰富、可高度定制的可视化图表。在《ECharts图表参数配置与SQL查询数据联动》课程中，ECharts 承担前端渲染层角色，负责将 SQL 查询结果转换为可交互的图表。

  核心定位：ECharts 不是简单的图表绘制工具，而是一个完整的“数据-映射-交互”可视化引擎。它通过声明式配置项（Option）驱动，将结构化数据映射为图形元素。

2.1.1 ECharts 技术架构与数据流

理解 ECharts 的内部数据流有助于后续配置 SQL 联动。下图展示了 ECharts 从数据输入到图形渲染的完整链路：

关键理解：SQL 查询结果作为原始数据输入，通过 Option 配置项中的 dataset 或 series.data 传入 ECharts。数据转换层自动完成数值映射、坐标计算，最终由 Canvas 渲染出图形。交互事件（如点击、悬停）可触发数据回调，实现与 SQL 的二次联动。

2.2 快速上手：创建你的第一个 ECharts 图表

本节将引导你从零开始，在 HTML 页面中创建一个柱状图。这是后续所有 SQL 联动案例的基础模板。

2.2.1 环境准备与引入 ECharts

ECharts 支持 CDN 引入和 npm 安装两种方式。本课程采用 CDN 方式，便于快速演示：

<!-- 在 HTML 的 <head> 或 <body> 末尾引入 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

版本注意：本课程基于 ECharts 5.x 版本。5.x 在 dataset、动画、SSR 等方面有重大改进，与 4.x 部分配置不兼容。请确保使用 5.x 版本。

2.2.2 三步创建图表

创建 ECharts 图表只需三个步骤：准备容器 → 初始化实例 → 设置配置项。

步骤	代码	说明
1. 准备容器	`<div id="main" style="width:600px;height:400px;"></div>`	必须指定宽高，否则图表无法渲染
2. 初始化实例	`var myChart = echarts.init(document.getElementById('main'));`	返回 ECharts 实例，后续所有操作通过该实例进行
3. 设置配置项	`myChart.setOption(option);`	传入 Option 对象，驱动图表渲染

2.2.3 完整示例：第一个柱状图

以下是一个完整的柱状图示例，展示 2024 年 Q1 各月销售额：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>第一个 ECharts 图表</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart1" style="width:700px;height:400px;"></div>
  <script>
    // 1. 初始化
    var myChart = echarts.init(document.getElementById('chart1'));

    // 2. 配置项
    var option = {
      title: {
        text: '2024年Q1销售额',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          type: 'bar',
          data: [120, 200, 150]
        }
      ]
    };

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

  运行结果：页面将显示一个柱状图，X 轴为月份，Y 轴为销售额（万元）。鼠标悬停在柱子上会显示具体数值——这是 tooltip 的默认行为。

2.3 基本配置项详解：title、tooltip、legend

ECharts 的配置项体系庞大，但 title、tooltip、legend 是最基础、最常用的三个组件。掌握它们即可构建 80% 的常规图表。

2.3.1 title（标题组件）

title 用于显示图表的标题和副标题，支持位置、样式、超链接等配置。

属性	类型	默认值	说明
`text`	string	''	主标题文本，支持 `\n` 换行
`subtext`	string	''	副标题文本
`left`	string/number	'left'	水平位置：'left'/'center'/'right' 或像素值
`top`	string/number	'top'	垂直位置：'top'/'middle'/'bottom' 或像素值
`textStyle`	object	{}	主标题样式，如 `{fontSize: 18, color: '#333'}`
`subtextStyle`	object	{}	副标题样式

示例：

title: {
  text: '销售趋势分析',
  subtext: '2024年1月 - 2024年6月',
  left: 'center',
  top: 10,
  textStyle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#2c3e50'
  },
  subtextStyle: {
    fontSize: 14,
    color: '#7f8c8d'
  }
}

2.3.2 tooltip（提示框组件）

tooltip 是图表交互的核心，当鼠标悬停或点击数据项时显示详细信息。它支持两种触发模式：axis（坐标轴触发）和 item（数据项触发）。

属性	类型	默认值	说明
`trigger`	string	'item'	'item'（散点图/饼图）或 'axis'（柱状图/折线图）
`formatter`	string/function	—	自定义提示内容模板，支持 `{a}`（系列名）、`{b}`（数据名）、`{c}`（数值）
`backgroundColor`	string	'rgba(50,50,50,0.7)'	提示框背景色
`borderColor`	string	'#333'	边框颜色
`textStyle`	object	{}	提示文字样式

示例（axis 触发 + 自定义 formatter）：

tooltip: {
  trigger: 'axis',
  formatter: function(params) {
    var res = '<strong>' + params[0].axisValue + '</strong><br/>';
    for (var i = 0; i < params.length; i++) {
      res += params[i].marker + ' ' + params[i].seriesName + '：' + params[i].value + ' 万元<br/>';
    }
    return res;
  }
}

SQL 联动场景：在后续课程中，tooltip 的 formatter 回调函数可以发起 AJAX 请求，根据当前数据点从 SQL 数据库查询明细数据，实现“点击柱子查看订单详情”的钻取功能。

2.3.3 legend（图例组件）

legend 用于标识不同系列的颜色和名称，支持点击筛选系列、分页显示、自定义图标等。

属性	类型	默认值	说明
`data`	array	—	图例数据数组，不设置时自动从 series 获取
`left`/`top`	string/number	'left'/'top'	图例位置
`orient`	string	'horizontal'	排列方向：'horizontal'（水平）或 'vertical'（垂直）
`selectedMode`	string/boolean	true	点击图例是否可筛选：'single'（单选）、'multiple'（多选）、false（禁用）
`icon`	string	'roundRect'	图例图标形状：'circle'/'rect'/'roundRect'/'triangle'/'diamond'/'pin'/'arrow'/'none'

示例（多系列图例 + 垂直布局）：

legend: {
  data: ['销售额', '利润', '成本'],
  left: 'right',
  top: 'middle',
  orient: 'vertical',
  selectedMode: 'multiple',
  icon: 'roundRect'
}

2.3.4 三者协同工作示例

将 title、tooltip、legend 组合到同一个 Option 中，形成完整的图表配置：

var option = {
  title: {
    text: '各产品线季度营收',
    subtext: '单位：万元',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['产品A', '产品B', '产品C'],
    left: 'left',
    top: 'bottom'
  },
  xAxis: {
    type: 'category',
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '产品A',
      type: 'bar',
      data: [320, 280, 350, 400]
    },
    {
      name: '产品B',
      type: 'bar',
      data: [210, 240, 270, 300]
    },
    {
      name: '产品C',
      type: 'bar',
      data: [150, 180, 200, 220]
    }
  ]
};

  交互效果：
  鼠标悬停柱子 → tooltip 显示该季度所有产品的具体数值
点击图例“产品A” → 隐藏产品A的柱子，图表自动重绘
标题和副标题始终固定在顶部居中位置

2.4 本章小结与关键概念

概念	核心要点	与 SQL 联动的关系
ECharts 数据流	数据 → Option → 转换 → 渲染 → 交互	SQL 查询结果作为数据源注入 Option
初始化流程	容器 → init() → setOption()	setOption() 可被多次调用，用于刷新 SQL 数据
title	图表标题、副标题、位置、样式	可动态显示 SQL 查询条件或时间范围
tooltip	悬停提示、axis/item 触发、自定义 formatter	formatter 回调可发起 SQL 明细查询
legend	系列标识、点击筛选、图标样式	筛选状态可联动 SQL 的 WHERE 条件

课后练习：修改 2.2.3 节的示例代码，将 title 的 text 改为“2024年Q1销售额（万元）”，为 tooltip 添加 formatter 显示“月份：xxx，销售额：xxx 万元”，并添加 legend 显示“销售额”图例。观察交互效果的变化。