echarts笔记

1.echarts入门

1.浏览器画图方式有两种
canvas ：点阵图，缩放失真，适合图形数量非常大的图表
svg：矢量图，缩放不失真，适合图形数量较少的图表
2.echarts 的绘图步骤
1建立dom 容器
2引入 ECharts
3实例化echarts
4建立图表配置项
5显示图表

2.echarts 常用组件

• 标题 title
• 图例 legend
• 工具栏 toolbox
• 提示框 tooltip
• 坐标轴 xAxis yAxis
• 系列列表 series
• 标记点 markPoint
• 标记线 markLine

** 01.标题：**

 - 主标题 text 
 - 副标题 subtext 
 - 位置 left 
 - 主标题样式 textStyle 
 - 副标题样式 subtextStyle 
 - 可见性 show

02.图例 legen

图例legend 适用于不同系列的数据过滤，它需要与series 搭配使用。

03.工具栏 toolbox

 - 保存为图片 saveAsImage
 - 配置项还原 restore
 - 数据视图工具 dataView
 - 数据区域缩放 dataZoom
 - 动态类型切换 magicType

04.提示框 tooltip

 - 提示框触发方式 trigger：
 - item 图形触发，主要在散点图，饼图等无类目轴的图表中使用。
 - axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表
 - none 什么都不触发

05.坐标轴 xAxis yAxis

 - name 坐标轴名称 
 - data 类目数据
 - y 轴的分割设置：
 - splitNumber 分割段数
 - interval 强制设置坐标轴分割间隔
 - minInterval 坐标轴最小间隔
 - maxInterval 坐标轴最大间隔

06.提示框 tooltip

 - 列表类型 type
 - 系列名 name ：用于提示tooltip，图例legend 筛选，数据更新
 - 数据 data
 - 标记点 markPoint
 - 标记线 markLine

系列列表 series

 - 列表类型 type
 - 系列名 name ：用于提示tooltip，图例legend 筛选，数据更新
 - 数据 data
 - 标记点 markPoint
 - 标记线 markLine

series 中系列数据的维度

07.标记点 markPoint

• list
  • data [] 标记的数据数组
    • 标记的数据{}
      • name 名称
      • type
        • 最小 min
        • 最大 max
        • 平均值 average
      • coord [x,y] 坐标位
      • symbolOffset 标记偏移
      • symbolSize 标记大小
      • value 最定制标记内容
      • symbol 标记图形包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’ ,url

08.标记线 markLine

• data [] 标记的数据数组
  • 标记的数据{}
    • name 名称
    • type
      • 最小 min
      • 最大 max
      • 平均值 average
    • coord [x,y] 坐标位
    • symbolOffset 标记偏移
    • symbolSize 标记大小
    • value 最定制标记内容
    • symbol 标记图形包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’ ,url

3.echarts 常用图表

1. 折线图 line
2. 饼图 pie
3. 散点图 scatter
4. K 线 candlestick
5. 雷达 radar
6. 仪表盘 gauge
7. 地图 map

折线图用法

折线图主要用来展示数据相随着时间推移的趋势或变化。折线图非常适合用于展示一个连续的二维数据，如某网站访问人数或商品销量价格的波动。

折线图除了展示某个事情发展的趋势，还可以用来比较多个不同的数据序列。

饼图用法
饼图主要用于展现不同类别数值相对于总数的占比情况。图中每个分块（扇区）的弧长表示该类别的占比大小，所有分块数据总和为100%。

当各类别数据占比较接近时，建议选用柱状图或南丁格尔玫瑰图

散点图用法
散点图通常用来识别两个变量之间的相关性或用来观察他们的关系，从而发现某种趋势，对于查找异常值或理解数据分布也很有效。如下图某个班级学生身高和体重的分布状况。

气泡图
散点图可以将一个对象的两个变量映射到x、y 位置上。如果此对象还有一个变量，那就可以映射到散点的大小上，这就变成了气泡图。

K 线图用法
K 线通常用于表示股票走势。




雷达图用法
雷达图的每个变量都有一个从中心向外发射的轴线，所有的轴之间的夹角相等，同时每个轴有相同的刻度。
雷达图表适合对比变量在数据集内的高低，比如产品性能、排名、评估等。

如下图，某幼儿园上周资金流统计的示例中比较的“东西”是预算、开销。参与比较的六个方面是食品、玩具、绘本、医疗、门票、服饰。每个变量都是通过0到500之间的金额来比较的。只有玩具一项的支出超出了预算。而服饰花费低于远预算，使用雷达图，哪些方面超出或不足变得一目了然了。

仪表盘的用法
仪表盘适合表示量的变化，如速度、体积、温度、进度、完成率、满意度等。

地图 map
地图主要用于地理区域数据的可视化。

ECharts 中提供了两种格式的地图数据：
js 文件，用 script 标签引入，引入后会自动注册地图名字和数据。
JSON 文件，需要通过 AJAX 异步加载后手动注册，注册方法是echarts.registerMap()。

用 script 标签引入js 文件的地图

ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。
所以，我还是使用以前下载好的china.js 文件，虽然不精确，但做一些不需要高精度效果的项目也没问题。
实现步骤：
1.在引入echarts 后，引入地图的js 文件

2.设置系列图表的样式为map，引入china.js 里已经注册的地图
series: [{
type: ‘map’,
map: ‘china’
}]

用JSON 文件绘制地图
json 文件下载地址：http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
fetch(’…/js/China.json’)
.then((res) => res.json())
.then(data => {
echarts.registerMap(‘china’, data);
const myChart = echarts.init(document.getElementById(‘main’));
const option = {
series: [{
type: ‘map’,
map: ‘china’
}]
};
myChart.setOption(option);
})

    **扩展-地理坐标系组件 geo**
    geo 是地理坐标系组件，它也可以画地图。

geo 和map 的区别在于，geo支持在地理坐标系上绘制散点图，线集。

4.echarts高级应用

1. 多坐标轴
2. 异步数据
3. 数据集 dataset
4. 区域缩放 dataZoom
5. 视觉映射 visualMap
6. 事件
7. 富文本标签

01.多坐标轴

直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴。

多坐标轴的设置方法：
在yAxis 中写入两组数据，统一行间距
在series 中设置数据时，使用 yAxisIndex 属性设置其与哪个y 轴相关联

02.异步数据

对于请求数据的方式，ajax、fetch 都可以，这是js 基础，就不再多说。
数据的更新有两种思路：
1.请求到数据后，setOption()
2.先setOption()，也就是有什么配置什么。请求到数据后，再追加配置
。

注：在数据加载的过程中，还可以使用loading

显示 loading：showLoading()
隐藏 loading：hideLoading()

03.数据集

dataset 数据集组件是从ECharts 4 开始有的，用于数据管理。

• 1.将数据写在每个series 系列中的方法，有以下缺陷：
  • 不适合数据处理
  • 不利于多个系列共享一份数据
  • 不利于基于原始数据进行图表类型、系列的映射安排
• 2.dataset 的优点：
  • 基于数据，设置映射关系，形成图表。
  • 数据和配置分离，便于单独管理。
  • 数据可以被多个系列或者组件复用。
  • 支持更多的数据的常用格式，例如二维数组、对象数组等。

数据集的理解方式

数据集也可以使用对象数组

数据集的行列映射
seriesLayoutBy：行列映射方式，会影响系列的划分方式
column：基于列映射，默认
row：基于行映射

seriesLayoutBy：column

seriesLayoutBy：row

数据集的dimensions 维度映射
作用：定义 series.data 或者 dataset.source 的每个维度的信息。
ECharts 会自动从 dataset.source 的第一行/列中获取维度信息。
但是，如果在dataset.source 里指定了 dimensions，那么 ECharts 不再会自动从 dataset.source 中获取维度信息。

数据集的dimensions 的书写位置


数据集的encode 编码映射

5.扩展-类目轴和数值轴的概念

xAxis.type 默认是类目轴 category，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
yAxis.type 默认是数值轴 value，适用于连续数据。
其余的，还有time 时间轴，log 对数轴。

04区域缩放 dataZoom
作用：概览整体，观察细节
dataZoom 组件的类型：

• 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
• 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
• 框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。

dataZoom 滑动条效果

05视觉映射 visualMap
visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
visualMap 组件有两种类型
-continuous 连续型
-piecewise 分段型

注：visualMap 以前叫dataRange，如果你看到了比较老的教程或博客，里面有dataRange，要知道那就是视觉映射 visualMap

ECharts 如何监听事件
ECharts 使用on 绑定事件，事件名称对应 DOM 事件名称，均为小写的字符串。如：
myChart.on(‘click’, function (params) {
// 控制台打印数据的名称
console.log(params.name);
});
鼠标事件有哪些

• ECharts 支持常规的鼠标事件类型，包括 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。
  所有的鼠标事件包含参数 params，如被点击的图形信息 params.componentType 。

如何监听组件交互事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 events 文档中有列出。

// 图例开关的行为只会触发 legendselectchanged 事件
myChart.on(‘legendselectchanged’, function (params) {
// 获取点击图例的选中状态
let isSelected = params.selected[params.name];
// 在控制台中打印
console.log((isSelected ? ‘选中了’ : ‘取消选中了’) + ‘图例’ + params.name);
// 打印所有图例的状态
console.log(params.selected);
});

代码触发 ECharts 中组件的行为
ECharts 通过调用 myChart.dispatchAction({ type: ‘’ }) 触发图表行为，如：

myChart.dispatchAction({
type: ‘highlight’,
seriesIndex: 0,
dataIndex: app.currentIndex
});

06富文本标签

富文本标签，就是内容丰富的文本标签。
在许多地方（如图、轴的标签等）都可以使用富文本标签。例如:

文本块和文本片段

• 文本块（Text Block）：文本标签块整体。
• 文本片段（Text fragment）：文本标签块中的部分文本。

文本标签的属性可以参考label：https://www.echartsjs.com/zh/option.html#series-bar.label
富文本的属性：https://www.echartsjs.com/zh/option.html#series-bar.label.rich.%3Cstyle_name%3E

6.echarts扩展知识

1. webpack 中使用echarts
2. 渲染器
3. 三维 echarts
4. 微信中使用echarts

01webpack 使用echarts 的步骤
1.npm 安装 ECharts
npm install echarts --save
2.引入 ECharts
整体引入
var echarts = require(‘echarts’);
按需引入
// 引入 ECharts 主模块
var echarts = require(‘echarts/lib/echarts’);
// 引入柱状图
require(‘echarts/lib/chart/bar’);
// 引入提示框和标题组件
require(‘echarts/lib/component/tooltip’);
require('echarts/lib/component/title’);

可以按需引入的模块列表见 https://github.com/apache/incubator-echarts/blob/master/index.js

02渲染器的设置方式
// 使用 Canvas 渲染器（默认）
var chart = echarts.init(containerDom, null, {renderer: ‘canvas’});
// 等价于：
var chart = echarts.init(containerDom);
// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, {renderer: ‘svg’});

03三维echarts
ECharts GL 是基于webgl 开发的。使用时，需要在引入echarts.min.js的基础上再引入一个echarts-gl.min.js

在微信中引入echarts 的方法

1.index.js 引入组件
import * as echarts from ‘…/…/ec-canvas/echarts’;
2.index.wxml 中引入组件

项目效果

github 源码地址：
https://github.com/pitersu/echarts/tree/master