笔记十三、Echarts基础

一、Echarts入门

（一）认识Echarts

Echarts 是一款基于JavaScript的提供直观，生动，可交互，可个性化定制的的数据可视化图表库。

特性：（1）丰富的可视化类型；（2）多种数据格式无需转换直接使用；（3）千万数据的前端展现；（4）移动端优化；（5）多渲染方案，跨平台使用；（6）深度的交互式数据探索；（7）多维数据的支持以及丰富的视觉编码手段；（8）动态数据；（9）绚丽的特效；（10）通过 GL 实现更多更强大绚丽的三维可视化；（11）无障碍访问（4.0+）

（二）Echarts使用步骤

1.引入Echarts  :使用CDN   /  下载源代码，地址

 2.初始化图表

• 在 html 页面定义一个容器，用来呈现 ECharts 图表内容
• 在 JavaScript 中初始化,导入ECharts 后在全局中生成一个 echarts 对象，通过该对象的 init( ) 方法,接收一个 DOM 元素，充当 ECharts 的容器。

如：   <div id="main" style="width: 500px;height:500px;"></div>

          <script>
                var myChart = echarts.init(document.getElementById('main'));
         </script>

 3.基本配置和数据

       通过一个 option 对象来进行配置，设置标题、提示框组件、图例组件、坐标轴、数据系列等，准备好配置数据后，echarts 对象通过调用 setOption( ) 来载入配置。

（三）Echarts配置语法

1.title--图表标题

常用的配置属性：

• show: 是否显示标题组件。默认值：true

• text: 主标题文本内容

• subtext: 副标题文本内容

• left: 标题的水平位置。可以是 'left', 'center', 'right' 或百分比，还可以是具体的像素值。默认值：'center'

• top: 标题的垂直位置。可以是 'top', 'middle', 'bottom' 或百分比，还可以是具体的像素值。默认值：'top'

• textAlign: 整体的水平对齐方式。默认值：基于 left 的位置自动判断。等

• textStyle: 主标题文字的样式。可以设置字体大小、颜色、对齐方式

• subtextStyle: 副标题文字的样式

2.legend--图例   ：可以帮助用户区分图表中的数据系列，并且还可以用于控制哪些系列显示或隐藏。

常用的配置属性：

• show: 同上

• type: 图例的类型。默认是 'plain'，还可以设置为 'scroll' 使图例支持翻页

• orient: 图例的布局朝向。可以是 'horizontal' 或 'vertical'。默认值：'horizontal'

• left, right, top, bottom: 图例的位置

• align: 图例标记和文本的对齐。默认自适应，可以设置为 'left' 或 'right'

• data: 图例的数据数组

• selected: 选中状态表。例如：{ '系列1': true, '系列2': false } 表示 "系列1" 被选中，而 "系列2" 被取消选中

• textStyle: 图例的文本样式

3.grid--网格  ：定义了图表的主体部分，确定了坐标轴的边界。

常用的配置属性：

• show: 是否显示直角坐标系网格。默认值：false

• left, right, top, bottom: 网格的位置

• containLabel: 网格区域是否包含坐标轴的刻度标签。默认值：false

4.xAxis、yAxis - xy 坐标轴 ：与 grid 配合使用。

常用的配置属性：

• type: 坐标轴的类型，常见的有 'value'（数值轴）和 'category'（类目轴）

• name: 坐标轴名称

• data: 当坐标轴类型为 'category' 时，此属性定义类目数据

5.series - 数据系列 ：每一个系列都对应一个特定的图表类型，如折线、柱状、饼图等。

常用的配置属性：

• type: 系列的类型，如 'line', 'bar', 'pie' 等，一般通过此属性来定义不同的图表形状

• name: 系列的名称，通常与 legend 中的数据相对应

• data: 系列的数据内容

• itemStyle: 数据项的样式

6.tooltip - 提示框 ：当用户鼠标悬停在数据项或者坐标轴上时，会自动显示相应的详细数据信息。

常用的配置属性：

• trigger: 触发类型

  • 'item': 数据项触发

  • 'axis': 坐标轴触发

• axisPointer: 坐标轴指示器配置，常用于 'axis' 触发类型的 tooltip

• backgroundColor: 提示框背景颜色

• borderColor 和 borderWidth: 提示框的边框颜色和宽度

• formatter: 提示框显示内容的格式化函数或字符串模板。格式化函数会传入一个参数，这个参数是一个数据集，包含了当前鼠标所在位置对应的数据信息对象，该对象的主要属性：

  • seriesName: 系列名称
  • name: 数据名称
  • value: 数据值
  • dataIndex: 数据索引
  • axisValue: 坐标轴上的值

7.toolbox - 图表工具箱 ：提供了一系列实用的图表工具，如保存图表为图片、数据视图切换、区域缩放、数据视图、动态类型切换、配置项还原等。

常用的配置属性：

• feature: 定义工具箱内的工具种类和配置。
• saveAsImage: 保存为图片。
• dataZoom: 区域缩放。
• dataView: 数据视图。
• magicType: 动态类型切换。
• restore: 配置项还原。

8.color - 图表全局颜色

       如：color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83']
 

 二、Echarts应用

(一)ECharts 基础图表

1. 柱状图 - bar

       通过柱形的长度来表现数据大小,将 series 的 type 设为 'bar'。

2. 折线图 - line

       用来展示数据项随着时间推移的趋势或变化,将 series 中序列的 type 设置成 line。

• 面积图

       在折线图的基础上添加 areaStyle 属性。

3. 饼图 - pie

       用于表现不同类目的数据在总和中的占比,不再需要配置坐标轴，而是把数据名称和值写在系列中。

• 南丁格尔玫瑰图

        又称玫瑰图，通常用弧度相同但半径不同的扇形表示各个类目,可以通过将饼图的 series.roseType 值设为 'area' 实现。

4. 散点图

        由许多“点”组成，将 series.type 设置成 “scatter” 。