Echarts常用图表

官网图表示例
Echarts中有很多中图表，主要用到的有七大类：
柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘…
image.png

Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区 我们可以在这个网站学习到很多酷炫的图表是如何制作的

柱状图

首先，我们来通过一个案例来学习柱状图。
image.png
我们先回忆一下上一节我们是如何生成一个图表的：

  1. 引入 echarts.js 文件
  2. 准备一个存放图表的盒子（容器）
  3. 初始化 echarts 实例对象
  4. 准备配置项（option）
  5. 将配置项设置给 echarts 实例对象

好，回忆之后，那我们就来开始制作这个图表吧！

第一步：确定图表类型

这是一个柱状图：type: "bar"

第二步：准备图表的数据

我们先来看看 x轴 和 y轴 都需要哪些数据：
x轴：[‘张三’, ‘李四’, ‘王五’, ‘闰土’, ‘小明’, ‘茅台’, ‘二妞’, ‘大强’]
y轴：[88, 92, 63, 77, 94, 80, 72, 86]

第三步：按步骤初始化图表

现在，我们来根据上一节创建 Echarts图表 的步骤再来一步步的生成这个图表

  1. 引入 echarts.js 文件（这里我就使用cdn的引入方式）

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

  2. 准备一个存放图表的盒子（容器）

    1. <div style="width: 600px;height:400px"></div>

  3. 初始化 echarts 实例对象

    1. var myCharts = echarts.init(document.querySelector("div"))

  4. 准备配置项（option）

    1. var option = {} // 这里我们等会儿填

  5. 将配置项设置给 echarts 实例对象 

    1. myCharts.setOption(option)

    全部代码 ```javascript <!DOCTYPE html>

  1. > 为了表述简洁，后面将省略该描述步骤，相信到这里你们一定熟记于心了吧~
  3. <a name="sz6oA"></a>
  4. ### 配置项的内容
  5. 接下来我们来填充 option （后面用 option 来代指配置项）的内容。<br />我们先来填入我们已经学过的三个配置项的属性：xAxis、yAxis、series。
  7. 分析一下该柱状图<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/2384107/1627401373993-6d9c1d75-027d-4164-925d-455126f22cba.png#clientId=u0932d18c-58cb-4&from=paste&height=151&id=u1a3047e5&margin=%5Bobject%20Object%5D&name=image.png&originHeight=302&originWidth=683&originalType=binary&ratio=1&size=12002&status=done&style=none&taskId=ub864847c-9377-4449-aaf3-d1697bb4414&width=341.5)<br />类型：柱状图     -> type: "bar"<br />x轴：类目轴     -> category<br />y轴：数值轴    -> value<br />x轴数据：['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']// 在xAxis中配置<br />y轴数据：[88, 92, 63, 77, 94, 80, 72, 86]  // 在series中配置
  9. 现在我们来填充配置项
  10. ```javascript
  11. // 可以将配置项中的数据用变量提取出来，在option中直接填入变量
  12. var xData = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // x轴的数据
  13. var yData = [88, 92, 63, 77, 94, 80, 72, 86] // y轴的数据
  14. var option = {
  15.     xAxis: {
  16.       type: "category", // 类目轴
  17.     data: xData,
  18.   },
  19.   yAxis: {
  20.       type: 'value' // 数值轴
  21.   },
  22.   series: [
  23.     {
  24.         name: '语文', // 名称：语文 可以随便取
  25.       type: 'bar',    // 类型：柱状图
  26.       data: yData     // y轴的数据
  27.     }
  28.   ]  
  29. }

点击查看【codepen】
现在我们成功根据需求创建了对应的图表！

柱状图常见效果

现在我们可以对这个图表进行一些润色，添加一些柱状图常见的效果。
快一起动手试试吧！

下面要介绍的属性都是属于 series 中的

标记：最大/小值 平均值

markPoint 图表标注
markLine 图表标线
image.png

Echarts 新版文档（5.x）中 删除了 柱状图bar 中关于 markPoint 和 markLine 的相关内容， 这里我们可以参考旧文档进行学习

接下来，我们来实现上图的效果，给图表添加最大值、最小值和平均值。

markPoint 图表标注

实现标注我们需要 markPoint 的 data 属性 来确定标注的位置

data 标注的数据数组。每个数组项是一个对象，有三种方式指定标注的位置。 这里我们了解其中的一种，其他两种参考文档 data 

  1. data: [
  2.     {
  3.         name: '最大值', // name 表示 标注名称
  4.         type: 'max'    // type 有三种类型 max、min、average
  5.     },{
  6.         name: '最小值',
  7.         type: 'min'
  8.     },  
  9. ]

我们给本节案例添加上 markPoint 的 data 属性：

  1.   series: [
  2.     {
  3.         name: '语文', // 名称：语文 可以随便取
  4.       type: 'bar',    // 类型：柱状图
  5.       data: yData,     // y轴的数据
  6.       markPoint: {
  7.         data: [
  8.                 {
  9.                     name: '最大值', // name 表示 标注名称
  10.                     type: 'max'    // type 有三种类型 max、min、average
  11.                 },{
  12.                     name: '最小值',
  13.                     type: 'min'
  14.                 },{
  15.                 name: '平均值',
  16.                 type: 'average'
  17.           }
  18.                 ]
  19.         }
  20.   ]

点击查看【codepen】
我们已经给图表添加了最大值、最小值和平均值的标注，不过都用标注来显示未免有些单调，我们试着用 标线 来表示平均值把。

markLine 图表标线

这里我们也需要用到 markLine 的 data 属性，用法跟 markPoint 的 data 属性一样。

  1. data: [
  2.     {
  3.         name: '最大值', // name 表示 标注名称
  4.         type: 'max'    // type 有三种类型 max、min、average
  5.     },{
  6.         name: '最小值',
  7.         type: 'min'
  8.     },  
  9. ]

我们给本节案例添加上 markLine 的 data 属性：

  1. series: [
  2.     {
  3.         name: '语文',
  4.       type: 'bar',
  5.       data: yData,
  6.       markPoint: {
  7.         data: [
  8.                 {
  9.                     name: '最大值',
  10.                     type: 'max'
  11.                 },{
  12.                     name: '最小值',
  13.                     type: 'min'
  14.                 }
  15.                 ]
  16.         },
  17.       markLine: {
  18.         data: [
  19.                 {
  20.                     name: '平均值', 
  21.                     type: 'average'
  22.                 }
  23.                 ]
  24.         },
  25.   ]

点击查看【codepen】
到这里已经实现我们的小目标啦！

显示

现在我们继续来完善我们的柱状图，让每个柱子显示数值，调整柱子的宽度，改变柱状图的显示方向…
还有很多可以调整的东西，不过不用急，一步步来就好了。

数值显示

label
图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
接下来直接列出一些它的常用属性。

  1. label: {
  2.   show: true, // 控制文本标签的显示 值为boolean
  3.   position: 'inside' // 标签的位置。支持 top / left / right / bottom / inside等
  4.   rotate: 0 // 标签旋转。从 -90 度到 90 度。正值是逆时针。
  5. }

属性太多了，其他属性请参考 文档。

点击查看【codepen】

宽度

barWidth
柱条的宽度，不设时自适应。
可以是绝对值例如 40 或者百分数例如 ‘60%’。

  1. barWidth: "10%" // 或者 barWidth: 10

点击查看【codepen】

横向柱状图

这个只需将 x 轴与 y轴 调换顺序就可以了

  1.     yAxis: {
  2.       type: "category", // 类目轴
  3.     data: xData,
  4.   },
  5.   xAxis: {
  6.       type: 'value' // 数值轴
  7.   },

点击查看【codepen】

总结

通过 柱状图 我们可以很清楚的了解 分类数据 的 具体情况（最大值、最小值、平均值…）。接下来进行一些关于生成柱状图的总结。
基本的柱状图
● 基本的代码结构
● x 轴和 y 轴的数据
● series 中的 type 设置为 bar
柱状图常见效果
● 最大值 \ 最小值 markPoint
● 平均值 marLine
● 数值的显示 label
● 柱的宽度 barWidth

到这里我们可能会感觉到，一个图表的生成，取决于很多属性的配置，我们不需要取死记硬背它们，用到的时候去官网看一眼就可以了。如果我们需要更多的定制效果，看一看文档或者去 gallery 逛一逛，就只知道怎么做了。