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: 颜色的色调。