Posted by:
努力记

努力记,通过记录,计划,让自己的努力可以触碰彩虹!

6,070

JavaScript:Echarts库

  • 2014-03-14
  • 暂无评论
百度开发的图表库: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地图扩展,标注&标线,事件交互
 Echarts

基本名词

名词 描述
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.* 设置特定数据项的特殊配置,最高优先级;


back up ↑

无觅相关文章插件,快速提升流量