JavaScript:Echarts库
百度开发的图表库:http://echarts.baidu.com/
提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现。
Echarts是基于AMD模块化标准,所以支持按需加载,最好单独下载ZRender配合
如果项目不是模块化,则可以按标签<link>加载
可以直接引入的单文件如下:
- echarts-plain.js : 经过压缩,包含除地图外的全部图表
- echarts-plain-original.js : 未压缩,可用于调试,包含除地图外的全部图表
- echarts-plain-map.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据
- echarts-plain-original-map.js : 未压缩,可用于调试,全图表,包含world,china以及34个省市级地图数据
从官网能发现该库的特色:
混搭,推拽重计算,cvs数据修改,动态类型切换,图例开关,数据区域选择,值域漫游,大规模散点图,动态数据添加,表现辅助,多维度堆叠,子区域地图模式,GenJson地图扩展,标注&标线,事件交互
基本名词
名词 | 描述 |
---|---|
chart | 是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表,可能包括坐标轴、图例等 |
axis | 直角坐标系中的一个坐标轴,坐标轴可分为类目轴和数值轴 |
xAxis | 直角坐标系中的横轴,通常并默认为类目轴 |
yAxis | 直角坐标系中的纵轴,通常并默认为数值轴 |
grid | 直角坐标系中除坐标轴外的绘图网格 |
legend | 图例 |
dataRange | 值域选择,常用于展现地域数据时选择值域范围 |
toolbox | 辅助工具箱 |
tooltip | 气泡提示框,用于展现更详细的数据 |
dataZoom | 数据区域缩放,常用于展现大数据时选择可视范围 |
series | 数据系列 |
图表名词
名词 | 描述 |
---|---|
line | 折线图,堆积折线图,区域图,堆积区域图 |
bar | 柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图 |
scatter | 散点图,气泡图,大规模散点图 |
k | K线图,蜡烛图, |
pie | 饼图,圆环图 |
radar | 雷达图,填充雷达图 |
chord | 和弦图 |
force | 力导布局图 |
map | 地图(支持中国及全国34个省市自治区地图) |
多级控制设计
简单的说,你可以通过这三级满足不同level的定制和个性化需求:
- 通过 option.* 设置全局统一配置;
- 通过 option.series.* 设置特定系列特殊配置,其优先级高于 option 内的同名配置;
- 通过 option.series.data.* 设置特定数据项的特殊配置,最高优先级;