Echarts笔记

一. 基础知识

1. Echarts实例

2. 组件

3. series

4. dataset

5. 用option描述图表

5.1 title

5.2 tooltip

5.3 legend图例组件

5.4 toolbox工具栏

5.5 坐标轴

6. 基本图表绘制

6.1 柱状图

6.2 多列柱状图

6.3 堆叠条形图

6.4 折线图

6.5 修改两个线模块配置

6.5 饼形图

6.6 散点图

7. 交互组件

7.1 title

7.2 legend

7.3 visualMap

7.4 dataZoom

7.5 timeline

二. 异步数据加载

1. 数据加载

2. 数据更新

三. 事件处理

1. 语法格式

2. 鼠标事件

2.1 示例代码

一. 基础知识

1. Echarts实例

一个网页中可以创建多个 ECharts 实例。每个 ECharts 实例中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 ECharts 的渲染容器），就可以在上面创建一个 ECharts 实例。每个 ECharts 实例独占一个 DOM 节点。

2. 组件

ECharts 中各种内容，都被抽象为“组件”，像上面提到的 series 是专门绘制“图”的组件。

在 ECharts 中的组件很多，例如在后续内容中我们可能遇到，xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等。

在图中右侧的 option 中声明了各个组件（包括 series），各个组件就出现在图中了。

注意：因为系列是一种特殊的组件，所以有时候也会出现 “组件和系列” 这样的描述，这种语境下的 “组件” 是指：除了 “系列 series” 以外的其他组件。

3. series

系列（series）是很常见的名词。在 ECharts 里，系列（series）是指：一组数值以及这些数值映射成的图。“系列”这个词可能来源于“一系列的数据”，而在 ECharts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个系列包含的要素至少有：一组数值、图表类型（series.type）、以及(关于这些数据如何映射成图的)参数。

在 ECharts 里系列数据（series.data）就是图表的数据内容数组，系列类型（series.type）就是图表类型，其中，系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）等等。

series 除了 data 和 type 外，常用的还有如下几个：

series.name 是系列的名字。
series.stack 是数据堆叠，同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加。

4. dataset

虽然每个系列都可以在 series.data 中设置数据，数据一条一条的放在 series 中，但在 ECharts4 之后开始支持数据集了，现在我们也可以使用数据集（dataset）来管理数据。

下图对比了数据集（dataset）和 series.data 在使用上的不同。

通过对比我们不难发现，数据集（dataset）能比较集中地管理相同对象的数据，而不是把它们分散在不同的配置项中，使我们的代码阅读起来更加轻松，数据配置起来也比较简单。

5. 用option描述图表

5.1 title

首先来看 option 中的第一个配置 title。

我们将这个值修改为折线图堆叠 2。

此时图表的标题也跟着改变了，也就是说 title.text 配置是设置图表的标题。

你可以在配置项 title 中找到 title.text 甚至关于 title 配置项更多的内容。

5.2 tooltip

当我们将鼠标放在折线的拐点处时会出现如下所示的提示框组件：

但是如果我们注释掉这个值：

tooltip: {
    trigger: 'axis'
},

此时将鼠标放在折线的拐点处时就不会出现提示框组件了

此时的 tooltip.trigger = 'axis' 指的是触发类型，它的值是可选的，包括：

item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
none：什么都不触发。

5.3 legend图例组件

legend.data 是图例的数据数组，也就是红框框起来的值。

5.4 toolbox工具栏

toolbox 工具栏，内置有导出图片（saveAsImage）、数据视图（dataView）、动态类型切换（magicType）、数据区域缩放（dataZoom）、重置（restore）等五个工具。

toolbox: {
    feature: {
        saveAsImage: {}
    }
},

toolbox.feature.saveAsImage 是保存为图片，也就是这个：

我们在 toolbox 中新增 dataView。

5.5 坐标轴

很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 ECharts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系等。

一个坐标系，可以由多个组件协作而成。我们以最常见的直角坐标系来举例。

在 ECharts 的直角坐标系中，有三个重要的组件，分别是：

xAxis：直角坐标系 X 轴。
yAxis：直角坐标系 Y 轴。
grid：直角坐标系网格。

网格（grid）是定义网格布局、大小和颜色的组件，用于定义直角坐标系整体的布局。

6. 基本图表绘制

6.1 柱状图

option = {
  title: {
    text: "每天人流量", // 图标题
  },
  xAxis: {
    type: "category",
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
  },
  yAxis: {
    type: "value",
  },
  color: ["#b4fe98"], // 调色盘，改变柱子占比的显示颜色
  tooltip: {
    trigger: "axis", // 提示框
  },
  series: [
    {
      data: [200, 300, 150, 100, 400, 600, 480],
      type: "bar",
      showBackground: true, // 显示背景颜色
      backgroundStyle: {
        color: "#EAEAEA", // 柱子的背景颜色
      },
    },
  ],
};

color 是绘制图表的调色盘的颜色列表，如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。默认为：

['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4',
 '#ea7ccc']

showBackground 是设置是否需要显示背景颜色的，取值为布尔类型，默认值为 false。
backgroundStyle 用于设置每一个柱条的背景样式，需要将 showBackground 设置为 true 时才会生效。

6.2 多列柱状图

option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器配置项
      type: "cross",
      crossStyle: {
        color: "red",
      },
    },
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      saveAsImage: { show: true }, // 保存图片
    },
  },
  legend: {
    data: ["男", "女"], // 图例的数据数组
  },
  xAxis: [
    {
      type: "category",
      data: ["中国", "美国", "古巴", "印度", "巴西", "不丹", "德国"],
      axisPointer: {
        type: "shadow",
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "人口数量",
      min: 0,
      max: 8000,
      interval: 1000,
      axisLabel: {
        formatter: "{value} 万",
      },
    },
  ],
  series: [
    {
      name: "男",
      type: "bar",
      data: [7113, 1619, 2340, 6987, 1046, 3783, 4145],
    },
    {
      name: "女",
      type: "bar",
      data: [6787, 1660, 2049, 6545, 1080, 4260, 3989],
    },
  ],
};

代码陌生配置项说明如下：

tooltip.axisPointer 是配置坐标轴指示器的全局公用设置，也就是说里面包含的属性都是与坐标轴的设置相关。
tooltip.axisPointer.type 是指示器类型，包含 line（直线指示器）、shadow（阴影指示器）、none（无指示器）、cross（十字准星指示器）这四种类型。
tooltip.axisPointer.crossStyle.color 用于设置线的颜色。
legend.data 是图例的数据数组。
xAxis.axisPointer.type 是指示器类型，包含 line（直线指示器）、shadow（阴影指示器）、none（无指示器）这三种类型。
yAxis.min 用于设置 y 轴的最小值。
yAxis.max 用于设置 y 轴的最大值。
yAxis.axisLabel.formatter 是刻度标签的内容格式器。

6.3 堆叠条形图

option = {
  title: {
    text: "男女就业比",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {},
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true, // grid 区域是否包含坐标轴的刻度标签
  },
  xAxis: {
    type: "value",
    min: 0,
    max: 100,
    splitLine: {
      show: false, // 是否显示分隔线
    },
    axisLabel: {
      formatter: "{value} %",
      show: false, // 不显示刻度标签
    },
  },
  yAxis: {
    type: "category",
    axisLine: false, // 是否显示刻度线
    inverse: true, // 是否反向坐标轴
    data: ["前端", "后端", "运维", "测试", "UI", "AI"],
  },
  series: [
    {
      barWidth: 30, // 设置柱子的宽度
      name: "男",
      type: "bar",
      stack: "total",
      label: {
        show: true,
      },
      emphasis: {
        focus: "series", // 高亮的图表样式和标签样式
      },
      itemStyle: {
        color: "#a2d2ff", // 设置柱子的颜色
        borderRadius: [6, 0, 0, 6], // 设置圆角边框
      },
      data: [30, 65, 60, 25, 20, 35],
    },
    {
      name: "女",
      type: "bar",
      stack: "total",
      label: {
        show: true,
      },
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        color: "#b1e693",
        borderRadius: [0, 6, 6, 0],
      },
      data: [60, 25, 20, 75, 70, 15],
    },
  ],
};

代码陌生配置项目说明如下：

grid.containLabel 设置 grid 区域是否包含坐标轴的刻度标签，默认为 false。
xAxis.splitLine.show 设置是否显示分隔线。
xAxis.axisLabel.show 设置是否显示刻度。
yAxis.axisLine.show 设置是否显示坐标轴线。
yAxis.inverse 设置是否反向坐标轴。
series-bar.barWidth 设置条柱的宽度。
series-bar.emphasis.focus 设置高亮的图表样式和标签样式，在高亮图表时，它支持三种配置：none 不淡出其它图表，默认使用该配置；self 只聚焦（不淡出）当前高亮的数据的图表；series 聚焦当前高亮的数据所在的系列的所有图表。
series-bar.itemStyle.color 设置图表的颜色，如果不设置颜色，就默认从调色盘依次取色。
series-bar.itemStyle.borderRadius 设置圆角半径。

6.4 折线图

<script>
  var option = {
    // 只给出修改部分的代码
    xAxis: [
      {
        type: 'category',
        boundaryGap: false, // 去除轴内间距
        axisLabel: {
          textStyle: {
            color: 'rgba(255,255,255,.6)', // 文本颜色
            fontSize: 12,
          },
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)', // X 轴线颜色
          },
        },
        data: [
        '01', '02', '03',
        '04', '05', '06',
        '07', '08', '09',
        '10', '11', '12',
        '13', '14', '15',
        ]
      },
    ],
  };
</script>

在上面代码中，xAxis.boundaryGap 是坐标轴两边留白策略，在类目轴和非类目轴的设置和表现是不一样的。

在类目轴中，boundaryGap 配置为布尔类型，当设置为 true 时，坐标轴上的刻度只会作为分隔线，标签和数据会处于两个刻度之间的中间。
在非类目轴中，boundaryGap 配置为具有两个值的数组，这两个值代表数据的最大值和最小值的延伸范围。

6.5 修改两个线模块配置

（左图为最终效果，右图为当前效果）。

最终效果与当前效果的区别可以归纳为以下三条：

线条是圆滑的。
填充区域是渐变色。
拐点大小、颜色和边框不同。

根据需求我们去官方文档查找相应的配置。

series-line.smooth 设置是否平滑曲线显示。

series-line.areaStyle 设置区域填充样式的容器。

series-line.areaStyle.color 设置填充的颜色，包括不同的渐变。

series-line.showSymbol 是否显示 symbol，也就是图上的数据点，默认为 true。

6.5 饼形图

option = {
  color: [
    "#7DCEA0",
    "#A9DFBF",
    "#F9E79F",
    "#F4D03F",
    "#B7950B",
    "#F8C471",
    "#E59866",
    "#E67E22",
    "#D68910",
    "#F1948A",
    "#E74C3C",
  ],
  title: {
    text: "全球新冠疫情部分数据",
    left: "center",
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    top: "bottom",
  },
  series: [
    {
      name: "面积模式",
      type: "pie",
      radius: [50, 250], // 饼图的半径。
      center: ["50%", "50%"], // 饼图中心坐标
      roseType: "area", // 设置是否展示成南丁格尔图
      itemStyle: {
        borderRadius: 8, //
      },
      data: [
        { value: 109, name: "巴林" },
        { value: 117, name: "马来西亚" },
        { value: 160, name: "新加坡" },
        { value: 176, name: "挪威" },
        { value: 239, name: "比利时" },
        { value: 248, name: "瑞典" },
        { value: 319, name: "英国" },
        { value: 321, name: "荷兰" },
        { value: 337, name: "瑞士" },
        { value: 522, name: "日本" },
        { value: 572, name: "美国" },
      ],
    },
  ],
};

陌生配置说明如下：

series.radius 设置饼形的半径。
series.center 设置饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
series.roseType 设置是否展示成南丁格尔图，通过半径区分数据大小，有两种模式：

- radius 区圆心角展现数据的百分比，半径展现数据的大小。
- area 所有扇区圆心角相同，仅通过半径展现数据大小。

series.itemStyle.borderRadius 用于指定饼图扇形区块的内外圆角半径。

legend.itemWidth 和 legend.itemHeight 分别是图例标记的图表宽度和高度，也就是最下方小图标的宽高。

series-pie.labelLine.length 是视觉引导线第一段的长度。

series-pie.labelLine.length2 是视觉引导项第二段的长度。

6.6 散点图

const dataBJ = [
  [1, 55, 9, 56, 0.46, 18, 6, "良"],
  [2, 25, 11, 21, 0.65, 34, 9, "优"],
  [3, 56, 7, 63, 0.3, 14, 5, "良"],
  [4, 33, 7, 29, 0.33, 16, 6, "优"],
  [5, 42, 24, 44, 0.76, 40, 16, "优"],
  [6, 82, 58, 90, 1.77, 68, 33, "良"],
  [7, 74, 49, 77, 1.46, 48, 27, "良"],
  [8, 78, 55, 80, 1.29, 59, 29, "良"],
  [9, 267, 216, 280, 4.8, 108, 64, "重度污染"],
  [10, 185, 127, 216, 2.52, 61, 27, "中度污染"],
  [11, 39, 19, 38, 0.57, 31, 15, "优"],
  [12, 41, 11, 40, 0.43, 21, 7, "优"],
  [13, 64, 38, 74, 1.04, 46, 22, "良"],
  [14, 108, 79, 120, 1.7, 75, 41, "轻度污染"],
  [15, 108, 63, 116, 1.48, 44, 26, "轻度污染"],
  [16, 33, 6, 29, 0.34, 13, 5, "优"],
  [17, 94, 66, 110, 1.54, 62, 31, "良"],
  [18, 186, 142, 192, 3.88, 93, 79, "中度污染"],
  [19, 57, 31, 54, 0.96, 32, 14, "良"],
  [20, 22, 8, 17, 0.48, 23, 10, "优"],
  [21, 39, 15, 36, 0.61, 29, 13, "优"],
  [22, 94, 69, 114, 2.08, 73, 39, "良"],
  [23, 99, 73, 110, 2.43, 76, 48, "良"],
  [24, 31, 12, 30, 0.5, 32, 16, "优"],
  [25, 42, 27, 43, 1, 53, 22, "优"],
  [26, 154, 117, 157, 3.05, 92, 58, "中度污染"],
  [27, 234, 185, 230, 4.09, 123, 69, "重度污染"],
  [28, 160, 120, 186, 2.77, 91, 50, "中度污染"],
  [29, 134, 96, 165, 2.76, 83, 41, "轻度污染"],
  [30, 52, 24, 60, 1.03, 50, 21, "良"],
  [31, 46, 5, 49, 0.28, 10, 6, "优"],
];
const dataGZ = [
  [1, 26, 37, 27, 1.163, 27, 13, "优"],
  [2, 85, 62, 71, 1.195, 60, 8, "良"],
  [3, 78, 38, 74, 1.363, 37, 7, "良"],
  [4, 21, 21, 36, 0.634, 40, 9, "优"],
  [5, 41, 42, 46, 0.915, 81, 13, "优"],
  [6, 56, 52, 69, 1.067, 92, 16, "良"],
  [7, 64, 30, 28, 0.924, 51, 2, "良"],
  [8, 55, 48, 74, 1.236, 75, 26, "良"],
  [9, 76, 85, 113, 1.237, 114, 27, "良"],
  [10, 91, 81, 104, 1.041, 56, 40, "良"],
  [11, 84, 39, 60, 0.964, 25, 11, "良"],
  [12, 64, 51, 101, 0.862, 58, 23, "良"],
  [13, 70, 69, 120, 1.198, 65, 36, "良"],
  [14, 77, 105, 178, 2.549, 64, 16, "良"],
  [15, 109, 68, 87, 0.996, 74, 29, "轻度污染"],
  [16, 73, 68, 97, 0.905, 51, 34, "良"],
  [17, 54, 27, 47, 0.592, 53, 12, "良"],
  [18, 51, 61, 97, 0.811, 65, 19, "良"],
  [19, 91, 71, 121, 1.374, 43, 18, "良"],
  [20, 73, 102, 182, 2.787, 44, 19, "良"],
  [21, 73, 50, 76, 0.717, 31, 20, "良"],
  [22, 84, 94, 140, 2.238, 68, 18, "良"],
  [23, 93, 77, 104, 1.165, 53, 7, "良"],
  [24, 99, 130, 227, 3.97, 55, 15, "良"],
  [25, 146, 84, 139, 1.094, 40, 17, "轻度污染"],
  [26, 113, 108, 137, 1.481, 48, 15, "轻度污染"],
  [27, 81, 48, 62, 1.619, 26, 3, "良"],
  [28, 56, 48, 68, 1.336, 37, 9, "良"],
  [29, 82, 92, 174, 3.29, 0, 13, "良"],
  [30, 106, 116, 188, 3.628, 101, 16, "轻度污染"],
  [31, 118, 50, 0, 1.383, 76, 11, "轻度污染"],
];
const schema = [
  { name: "date", index: 0, text: "日" },
  { name: "AQIindex", index: 1, text: "AQI指数" },
  { name: "PM25", index: 2, text: "PM2.5" },
  { name: "PM10", index: 3, text: "PM10" },
  { name: "CO", index: 4, text: "一氧化碳（CO）" },
  { name: "NO2", index: 5, text: "二氧化氮（NO2）" },
  { name: "SO2", index: 6, text: "二氧化硫（SO2）" },
];
const itemStyle = {
  opacity: 0.8,
  shadowBlur: 10,
  shadowOffsetX: 0,
  shadowOffsetY: 0,
  shadowColor: "rgba(0,0,0,0.3)",
};
option = {
  color: ["#dd4444", "#fec42c", "#80F1BE"],
  legend: {
    top: 10,
    data: ["北京", "上海", "广州"],
    textStyle: {
      fontSize: 16,
    },
  },
  grid: {
    left: "10%",
    right: 150,
    top: "18%",
    bottom: "10%",
  },
  tooltip: {
    backgroundColor: "rgba(255,255,255,0.7)",
    formatter: function (param) {
      var value = param.value;
      return (
        '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
        param.seriesName +
        " " +
        value[0] +
        "日：" +
        value[7] +
        "</div>" +
        schema[1].text +
        "：" +
        value[1] +
        "<br>" +
        schema[2].text +
        "：" +
        value[2] +
        "<br>" +
        schema[3].text +
        "：" +
        value[3] +
        "<br>" +
        schema[4].text +
        "：" +
        value[4] +
        "<br>" +
        schema[5].text +
        "：" +
        value[5] +
        "<br>" +
        schema[6].text +
        "：" +
        value[6] +
        "<br>"
      );
    },
  },
  xAxis: {
    type: "value",
    name: "日期",
    nameGap: 16,
    nameTextStyle: {
      fontSize: 16,
    },
    max: 31,
    splitLine: {
      show: false,
    },
  },
  yAxis: {
    type: "value",
    name: "AQI指数",
    nameLocation: "end",
    nameGap: 20,
    nameTextStyle: {
      fontSize: 16,
    },
    splitLine: {
      show: false,
    },
  },
  visualMap: [
    {
      left: "right",
      top: "10%",
      dimension: 2,
      min: 0,
      max: 250,
      itemWidth: 30,
      itemHeight: 120,
      calculable: true,
      precision: 0.1,
      text: ["圆形大小：PM2.5"],
      textGap: 30,
      inRange: {
        symbolSize: [10, 70],
      },
      outOfRange: {
        symbolSize: [10, 70],
        color: ["rgba(255,255,255,0.4)"],
      },
      controller: {
        inRange: {
          color: ["#c23531"],
        },
        outOfRange: {
          color: ["#999"],
        },
      },
    },
  ],
  series: [
    {
      name: "北京",
      type: "scatter",
      itemStyle: itemStyle,
      data: dataBJ,
    },
    {
      name: "广州",
      type: "scatter",
      itemStyle: itemStyle,
      data: dataGZ,
    },
  ],
};

tooltip.backgroundColor 是提示框浮层的背景颜色。
tooltip.formatter 是用来设置提示浮层内容显示的格式，它支持字符串模板和回调函数两种形式。
xAxis.nameGap 用于设置坐标轴名称与轴线之间的距离，默认值为 15。
xAxis.nameTextStyle.fontsize 是用来设置坐标轴名称文字的字体大小，默认值为 12。
xAxis.nameLocation 是用来设置坐标轴名称显示位置，可选值有 start（开头）、middle 或 center（居中）、end（末尾）。
visualMap 是视觉映射组件。
visualMap.left 和 visualMap.top 设置 visualMap 组件离容器左侧和顶部的距离。
visualMap.dimension 用来指定数据的哪个维度映射到视觉元素上。
visualMap.min 和 visualMap.max 用来设置 visualMap 组件允许的最小值和最大值。
visualMap.itemWidth 和 visualMap.itemHeight 设置 visualMap 组件图表的宽度和高度。
visualMap.calculable 设置是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
visualMap.precision 是设置数据展示的小数精度，默认为 0，无小数点。
visualMap.text 和 visualMap.textGap 用来设置 visualMap 组件图表上两端的文字和设置文字与图表之间的距离。
visualMap.inRange.symbolSize 设置选中范围内散点的大小。
visualMap.outOfRange.symbolSize 设置选中范围外散点的大小。
visualMap.outOfRange.color 设置选中范围外散点的颜色。
visualMap.controller 是 visualMap 组件中，控制器的 inRange、outOfRange 设置。

7. 交互组件

常用的交互组件有：

标题组件（title）
图例组件（legend）
视觉映射组件（visualMap）
数据区域缩放组件（dataZoom）
时间线组件（timeline）

7.1 title

title 用于配制整个折线图的标题，其包含主标题（text）和副标题（subtext）。

例如官网上某站点用户 Access From 的示例。

7.2 legend

legend 展现了不同系列的标记（symbol），颜色和名字。可以通过点击图例控制哪些系列不显示。

当图例数量过多时，我们可以使用 legend.type 设置可滚动图例。例如官网上可滚动的图例的示例。

通过 legend.orient 可以设置图例的布局朝向，其默认值为水平（horizontal），可以修改为垂直（vertical）。

通过 legend.top、legend.bottom、legend.left、legend.right 设置图例距离容器上下左右的距离。

例如官网上某站点用户 Access From 的示例。

7.3 visualMap

visualMap 是视觉映射组件，用来进行视觉编码，也就是将数据映射到视觉元素。

通过 visualMap.min 和 visualMap.max 可以指定 visualMap 组件的最小值和最大值。

通过 visualMap.dimension 可以到指定数据的维度，也就是说使用哪个维度的数据去映射到 visualMap 组件上（其默认映射数据的最后一列）。数据的每一列为一个维度，可以看一看下面这个图。

通过 visualMap.orient 设置 visualMap 组件的放置方向（其默认为垂直 vertical），可以设置为水平 horizontal。

通过 visualMap.top、visualMap.bottom、visualMap.left、visualMap.right 可以设置 visualMap 组件距离容器上下左右的位置。

通过 visualMap.text 设置 visualMap 组件两端的文字。

通过 visualMap.calculable 设置是否显示拖拽手柄。

通过 visualMap.inRange 来定义选中范围中的视觉元素，可选的视觉元素中最常用的是 color，用于设置图元的颜色。

例如官网上流式渲染和视觉映射操作的示例。

7.4 dataZoom

dataZoom 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

常见有两种类型，分为：

内置型数据区域缩放组件（dataZoom-inside）：内置在坐标系中，用户可以通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
滑动条型数据区域缩放组件（dataZoom-slider）：有单独的滑动条，用户可以在滑动条上进行缩放或漫游。

我们来说一说该组件常用的配置项。

通过 dataZoom.type 可以设置缩放组件的类型，一般值为 slider、inside。

通过 dataZoom.xAxisIndex 和 dataZoom.yAxisIndex 可以设置组件控制的 x 轴和 y 轴。

通过 dataZoom.start 和 dataZoom.end 可以设置数据窗口范围的开始百分比和结束百分比。

例如官网上缩放散点图的示例。

7.5 timeline

timeline 用于在多个 ECharts option 之间进行切换、播放等功能。

例如官网上宏观经济指标图的示例。

二. 异步数据加载

1. 数据加载

本文我们基于 jQuery 来获取数据。

我们直接通过一个例子来为大家演示如何获取数据，并填入 setOption 中。

思路如下：

数据要单独放入 .json 文件中。
使用 jQuery 中的 get 方法来获取数据。

获取了图表需要的数据后，我们使用 jQuery 中的 get 方法来获取 data.json 文件中的数据。回忆一下，语法格式如下：

$.get(url, data, callback(data, status, xhr), dataType);

然后，新建一个 index.html 文件，在文件中写入以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="echarts.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
    <title>异步加载数据</title>
  </head>

  <body>
    <div id="main" style="width:600px; height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById("main"));
      $.get(
        "data.json",
        function (data) {
          myChart.setOption({
            title: {
              text: "电影类型",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                type: "pie",
                radius: "55%",
                data: data.data_pie, // 数据
              },
            ],
          });
        },
        "json"
      );
    </script>
  </body>
</html>

效果如下：

在上面代码中，使用 AJAX 中的 get 方法请求了 data.json 文件中的数据，在其回调函数里，绘制了一个饼形图，使用 data.data_pie 填入了请求成功的数据。

2. 数据更新

从上面的学习中我们知道了，数据的加载都是在 setOption 配置项中完成的。

其实除了加载数据，设置图表实例的配置项、数据、万能接口、所有参数和数据的修改都可以通过 setOption 来完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画配置项的话，ECharts 会找到两组数据之间的差异，然后通过合适的动画去表现数据的变化。

下面我们来看个例子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="echarts.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
    <title>更新数据</title>
  </head>

  <body>
    <div id="main" style="width:600px; height:400px;"></div>
    <!--绑定点击事件 updateData-->
    <button οnclick="updateData()">更新数据</button>
    <script type="text/javascript">
      var nums = [25, 5, 4, 35, 12, 30];
      var myChart = echarts.init(document.getElementById("main"));
      option = {
        xAxis: {
          type: "category",
          data: ["喜剧片", "恐怖片", "爱情片", "科幻片", "纪录片", "动画片"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: nums,
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
      function updateData() {
        // 生成随机数
        var num = Math.floor(Math.random() * 10);
        for (var i in nums) {
          nums[i] = nums[i] + num;
        }
        myChart.setOption(option); // 绘制新图表
      }
    </script>
  </body>
</html>

效果如下所示：

在上面的代码中，我们通过页面上按钮的点击事件触发 updateData 函数，在该函数中我们使用 Math.random() 生成随机数，然后加到 nums 数组中的每一项数据上。其实我们可以将点击事件改为 setInterval，定期去更新数据，使用很简单

三. 事件处理

在 ECharts 的图表中用户的操作将会触发相应的事件，比如点击事件。我们可以使用 on 方法来监听用户触发的事件，通过回调函数做出相应的处理，比如弹出对话框、跳转到另一个地址等操作。

1. 语法格式

myChart.on("事件名称", 回调函数);

在 ECharts 中，事件分为两种类型：

鼠标事件，或者悬浮（hover）图表的图形时触发的事件。
交互的组件后触发的行为事件，例如数据区域缩放时触发的 datazoom 事件。

2. 鼠标事件

在 ECharts 中，支持的常见鼠标事件有以下几种：

click：点击鼠标时触发。
dblclick：在同一个元素上双击鼠标时触发。
mouseup：释放按下的鼠标键时触发。
mousedown：按下鼠标键时触发。
mousemove：当鼠标在一个节点内部移动时触发。
mouseover：鼠标进入一个节点时触发。
mouseout：鼠标离开一个节点时触发。
globalout：鼠标移出坐标系触发。
contextmenu：打开上下文菜单时被触发。

2.1 示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="echarts.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
    <title>事件触发</title>
  </head>

  <body>
    <div id="main" style="width:600px; height:400px;"></div>
    <script>
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option = {
        series: [
          {
            name: "人气",
            type: "pie",
            radius: "50%",
            data: [
              { value: 35, name: "数据库" },
              { value: 48, name: "后端开发" },
              { value: 24, name: "信息安全" },
              { value: 30, name: "人工智能" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      // 处理点击事件并且跳转到相应的课程页面
      myChart.on("click", function (params) {
        console.log(params.name);
        window.open("https://www.lanqiao.cn/courses/?category=" + params.name);
      });
    </script>
  </body>
</html>

效果如图所示

在上面代码中，我们监听了用户的点击事件。点击饼图中的某个区域，使用 params.name 可以获取到相应的区域数据名，然后使用 window.open 来打开对应的课程页面。