echarts开发小tips

---

之前介绍了一些echarts的入门使用及常用配置项，在能用echarts制作一个简单图表时，希望这篇文章能在更高的要求下，提供一些帮助。

---

一、echarts菜单使用：

在对echarts不是很熟悉的时候，首先要了解echarts官网提供的各种功能，从导航菜单来看，包含首页、文档、下载、示例、资源、社区和ASF。

• 首页：查看快速入门手册、查看所有示例
• 文档：echarts特性、使用教程、API、配置项手册、版本记录、常见问题、新版本开发指南
• 下载：根据版本下载、主题下载、扩展下载
• 示例：不同类型统计图的多种示例
• 资源：将表格内数据转化为数组的工具、自定义主题工具、配置项速查工具、更多资源
• 社区：问题交流和贡献代码
• ASF ：Apache相关

从导航菜单来看，常用的到的有文档、下载、示例。资源中的配置项速查工具，可根据统计图类型进行分类查找配置信息；也能在更多资源提供的Gallery浏览更多的统计图呈现样式并加以使用。社区菜单下的lssues能查到echarts现存的一些bug。

二、配置项的使用：

echarts的配置项很多，将所有配置项或方法全记住也不太现实，但是如何快速查到自己所需的配置项，就比较重要了。首先了解一下配置项的含义：

• title: {...} ,//标题
• legend: {...} ,//图例
• grid: {...} ,//统计图显示区域，不包含x,y轴以外的区域
• xAxis: {...} ,//x轴
• yAxis: {...} ,//y轴
• polar: {...} ,//极坐标
• radiusAxis: {...} ,//极坐标系的径向轴
• angleAxis: {...} ,//极坐标系角度轴
• radar: {...} ,//雷达图
• dataZoom: [{...}] ,//区域缩放，根据x,y轴信息缩放展示,一般用于数据过多时，变化查看细节或者整体信息
• visualMap: [{...}] ,//视觉映射，用于地图数据与视觉的映射
• tooltip: {...} ,//鼠标移入提示框
• axisPointer: {...} ,//坐标轴指示器，指示坐标轴当前刻度的工具
• toolbox: {...} ,//工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
• brush: {...} ,//区域选择组件，可以选择图中一部分数据，向用户展示被选中数据，或者他们的一些统计计算结果
• geo: {...} ,//地理坐标系,用于地图的绘制，支持在地理坐标系上绘制散点图，线集
• parallel: {...} ,//平行坐标系,每一个维度（每一列）对应一个坐标轴，每一个『数据项』是一条线，贯穿多个坐标轴
• parallelAxis: {...} ,//平行坐标系中的坐标轴
• singleAxis: {...} ,//单轴，可以被应用到散点图中展现一维数据
• timeline: {...} ,//时间轴，一般用于展示不同时间的数据变化
• graphic: {...} ,//原生图形元素组件,一般用于插入图片，可以支持的图形元素包括： image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group
• calendar: {...} ,//日历坐标系，可以在热力图、散点图、关系图中使用日历坐标系
• dataset: {...} ,//ECharts 4 开始支持了 数据集（dataset）用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射
• aria: {...} ,//无障碍访问,ECharts 4 支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内,ECharts 5 新增支持贴花纹理，作为颜色的辅助表达，进一步用以区分数据
• series: [{...}] ,//根据统计图类型进行分类介绍的配置项
• darkMode ... ,//暗黑模式，默认会根据背景色 backgroundColor 的亮度自动设置
• color ... ,//调色盘颜色列表,一般用于主题颜色设置，如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色
• backgroundColor: ...,//背景色，默认无背景
• textStyle: {...} ,//全局的字体样式,细节字体样式也基本遵循此规则
• animation: true ,//是否开启动画
• animationThreshold: 2000 ,//否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画
• animationDuration: 1000 ,//初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果
• animationEasing: cubicOut ,//初始动画的缓动效果,不同的缓动效果可以参考缓动示例
• animationDelay: 0 ,//初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果
• animationDurationUpdate: 300 ,//数据更新动画的时长
• animationEasingUpdate: cubicInOut ,//数据更新动画的缓动效果
• animationDelayUpdate: 0 ,//数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果
• stateAnimation: {...} ,//状态切换的动画配置，支持在每个系列里设置单独针对该系列的配置
• blendMode: 'source-over' ,图形的混合模式，不同的混合模式见 CanvasRenderingContext2D.globalCompositeOperation - Web API 接口参考 | MDN
• hoverLayerThreshold: 3000 ,//图形数量阈值，决定是否开启单独的 hover 层，在整个图表的图形数量大于该阈值时开启单独的 hover 层
• useUTC: false ,//是否使用 UTC 时间
• options ... ,//用于 timeline 的 option 数组
• media: [{...}] ,//移动端自适应

在大概了解配置的含义后，找起自己所需的配置项就会快很多。如果不是很熟悉，可以点进单个配置项看下具体意思和如何使用，但是也会遇到一些不清楚要使用哪个配置项来解决问题的时候，可以通过百度提供一些解决思路。

三、常见问题及解决方法

在导航-->文档-->常见问题中，介绍了坐标轴、图例、折线图、柱状图、地图、百度地图、事件处理和其他常见问题，建议大家提前看一看，主要是坐标轴问题、是否设置了堆叠折线图问题、地图、百度地图和事件处理。
之前博客里常用配置项是我遇到问题做的一个简单总结，其他的常见问题一时半会没有想起来，想起来再补充吧....

四、如何将多个echarts图保存为图片

1.单个保存
用toolbox的配置项toolbox.feature.saveAsImage打开工具栏的保存图片按钮，通过触发不不同的统计图保存事件，保存成图片
2.批量保存
通过触发一次保存事件，批量将每个统计图下载为图片
用到的方法主要为将canvas分别转换为图片，然后通过 Canvas2Image插件进行图片下载
3.多个保存为一张图片
通过触发一次点击事件，将页面中某一部分需要保存为图片的，下载到本地
用到的方法主要为，使用html2canvas插件将页面一部分或者整个页面转换为图片，然后通过 Canvas2Image插件进行图片下载