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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
Echarts 配置语法
html页面添加图表容器
<div id="set" style="height: 100%"></div>- 1
js代码绑定容器与配置参数。
dom = document.getElementById("set");
var myChart = echarts.init(dom);
option={
title:mytitle,
tooltip:mytooltip,
toolbox:mytoolbox
...
};
myChart.setOption(option);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
title：标题组件
tooltip：提示框组件
tooltip用于设置当鼠标滑向数据点时显示的提示框信息。
toolbox：工具栏组件
toolbox用于设置图表工具栏样式内容，保存图片、图表切换、是否缩放等。
legend：图例组件
legend用于设置图例相关属性。
dataZoom：区域缩放组件
dataZoom控制数据图表的缩放形式、缩放大小等。
visualMap：视觉映射组件
visualMap视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。