ECharts的介绍

ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
主要用于数据展示

ECharts 能够做出各种各样漂亮的图表，它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便, 功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址： https://echarts.apache.org/zh/index.html

下载方式

你可以通过以下几种方式获取 Apache EChartsTM。

如果你不会以上的方式，我贴心的给你准备了一个附件进行下载
echarts.min.js 版本4
echarts.min.js 版本5

ECharts的快速上手

ECharts 的入门使用特别简单, 5分钟就能够上手。
官方教程 非常适合入门
image.png

具体步骤

ECharts上手大体分为这几个步骤：

  1. 引入 echarts.js 文件 

    1. <script src="js/echarts.min.js"></script>

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

这个盒子（容器）通常是div

  1. <div id="main" style="width: 600px;height:300px;"></div>

  1. 初始化 echarts 实例对象 

    1. var myChart = echarts.init(document.getElementById('main'))

  2. 准备配置项

配置项决定了我们图表的样式（饼图还是折线图等） 

  1. var option = {
  2.     xAxis: {
  3.         type: 'category',
  4.         data: ['小明', '小红', '小王']
  5.     },
  6.     yAxis: {
  7.         type: 'value'
  8.     },
  9.     series: [{
  10.         name: '语文',
  11.         type: 'bar',
  12.         data: [70, 92, 87],
  13.     }]
  14. }
  1. 将配置项设置给 echarts 实例对象 
    1. myChart.setOption(option)
    全部代码 ```html <!DOCTYPE html>

``` 经过上述步骤，我们就绘制了一个如下的柱状图表，是不是很简单~
点击查看【codepen】

一个图表最终呈现什么样子，完全取决于这个配置项。所以对于不同的图表,，除了配置项会发生改变之外,，其他的代码 都是固定不变的。 也就是说配置项决定了图表的样式。

配置项的讲解

echarts的配置项有很多，我们先从最易看到、最明显的配置项讲起：x轴 和 y轴。

xAxis

官方文档
xAxis 表示直角坐标系 中的 x 轴。
image.png
type 表示坐标轴类型，有以下四个值

  • ‘value’ 数值轴，适用于连续数据。
  • ‘category’ 类目轴，适用于离散的类目数据。
  • ‘time’ 时间轴，适用于连续的时序数据，
  • ‘log’ 对数轴。适用于对数数据。

本例中使用的是’category’ 类目轴，表示 x轴上的坐标值以类别名称显示，需要配置 data 数据才能显示。

yAxis

官方文档
yAxis 表示直角坐标系 中的 y 轴，如果 type 属性配置为 value ，那么无需配置 data，此时 y 轴会自动去 series 下找数据进行图表的绘制
image.png
本例中，y轴根据 series 中的 data数据 进行匹配
小明 -> 70
小红 -> 92
小王 -> 87
image.png

series

官方文档
系列列表。每个系列通过 type 决定自己的图表类型，data 来设置每个系列的数据，name 表示系列名称。因为它是一个数组，所以可以添加多个系列。
image.png

配置项都是以 键值对 的形式存在，并且配置项有很多，ECharts 的学习大多是针对于这些配置项的，对于 配置项的学习，需要的时候查一查官方文档即可 。

配置项的内容先讲到这里，Echarts 配置项多达数十个，其中还有一堆小分支，这么多当然不可能一下子讲完，讲完了也不可能记住。
image.png
最好的学习方式是根据案例来慢慢熟悉这些配置项，下一节我们将从最常见的柱状图，一点点将配置项给熟悉起来。