Echarts数据可视化开发参数配置全解

全栈工程师开发手册 （作者：栾鹏）

Echarts数据可视化开发代码注释全解

Echarts数据可视化开发参数配置全解

6大公共组件详解（点击进入）：

title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解

5大坐标系详解（点击进入）：

地理坐标系geo详解、grid直角坐标系（xAxis、yAxis）详解、parallel平行坐标系详解、polar极坐标系详解、radar雷达坐标系详解

19种图表类型详解（点击进入，待续）：

series-bar柱形图详解、series-effectscatter特效散点图、series-graph关系图、series-heatmap热力图、series-line线图、series-map地图、series-pie饼图、series-radar雷达图、series-scatter散点图

图表行为和图表事件：

action图表行为、event图表事件

Echarts简介

6个公共组件：

Echarts工具的完整使用包括title标题、tooltip提示框、toolbox工具栏、legend图例、dataZoom缩放控制、visualMap视觉映射，6个公共组件。

5种坐标系参数配置：

包括geo地理坐标系、grid直角坐标系、parallel平行坐标系、polar极坐标系、radar雷达坐标系，5种坐标系参数配置。

19种类型的数据图表：

包括bar柱形图、effectscatter特效散点图、graph关系图、heatmap热力图、lines线图、map地图、pie饼图、radar雷达图、scatter散点图、treemap树形图、boxplot箱盒图、Candlestick股票K线图、sankey桑基图、funnel漏斗图、gauge仪表盘、pictorialBar象形柱图、themeRiver主题河流，19种类型的数据图表。

今天我们就详细介绍一下Echart从安装入门到所有公共组件。后面的文章我们会详述5种坐标系和19种图表类型。笔者为大家方便，将所有内容写成demo，并配有完美注释。有需要的请留下邮箱。

安装 Echarts：

Echarts的引入比较麻烦，需要引入的插件较多。

<script type="text/javascript" src="js/echarts-all-3.js"></script>
<script type="text/javascript" src="js/extension/dataTool.min.js"></script>
<script type="text/javascript" src="js/extension/jquery-2.2.4.js"></script>
<script type="text/javascript" src="js/map/js/china.js"></script>
<script type="text/javascript" src="js/map/js/world.js"></script>
<script type="text/javascript" src="js/api.js"></script>
<script type="text/javascript" src="js/extension/bmap.min.js"></script>

Echarts 配置语法

html页面添加图表容器

<div id="set" style="height: 100%"></div>

js代码绑定容器与配置参数。

dom = document.getElementById("set");
var myChart = echarts.init(dom);
option={
title:mytitle,
tooltip:mytooltip,
toolbox:mytoolbox
...
};
myChart.setOption(option);

title：标题组件

tooltip：提示框组件

tooltip用于设置当鼠标滑向数据点时显示的提示框信息。

toolbox：工具栏组件

toolbox用于设置图表工具栏样式内容，保存图片、图表切换、是否缩放等。

legend：图例组件

legend用于设置图例相关属性。

dataZoom：区域缩放组件

dataZoom控制数据图表的缩放形式、缩放大小等。

visualMap：视觉映射组件

visualMap视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。