ECharts的使用(一)

781 阅读4分钟
let option = {
  title: {},  //标题组件
  legend: {},  // 图例组件
  series: {},  // 系列列表。每个系列通过 type 决定自己的图表类型 
  grid: {},  // 直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。
  xAxis: {},	//直角坐标系 grid 中的 x 轴
  yAxis: {},	//直角坐标系 grid 中的 y 轴
  toolbox: {},  // 工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
}

grid 直角坐标系内绘图网格

  • width grid 组件的宽度、高度
  • height grid 组件的高度
  • left top right bottom 定位在容器里的位置

xAxis x 轴、yAxis y 轴

position 位置

  • xAxis:'top' || ' bottom'
  • yAxis:'left' || ' right'

type 坐标轴类型。

  • 'value' 数值轴,适用于连续数据。

  • 'category' 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。

  • 'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

  • 'log' 对数轴。适用于对数数据。

axisLine 坐标轴轴线相关设置。

axisTick 坐标轴刻度相关设置

  • show 是否显示坐标轴刻度。 value:Boolean

axisLabel 坐标轴刻度标签的相关设置。

  • interval 坐标轴刻度标签的显示间隔,在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。 可以设置成 0 强制显示所有标签。

  • rotate 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。

toolbox 工具栏

图例组件 legend

  • itemGap = 10 图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
  • itemWidth = 25
  • itemHeight = 14
  • symbolKeepAspect = true
  • selectedMode = false 图例选择的模式,控制是否可以通过点击图例改变系列的显示状态,默认开启图例选择。

series

type 图表类型

  • line 折线/面积图

  • bar 柱状图

  • pie 饼图

  • radar 雷达图

    雷达图主要用于表现多变量的数据,例如球员的各个属性分析。依赖 radar 组件。

  • tree 树图

  • scatter 散点(气泡)图

  • effectScatter 带有涟漪特效动画的散点(气泡)图

  • treemap 是一种常见的表达『层级数据』『树状数据』的可视化形式

  • sunburst 旭日图

    旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。

  • boxplot 中文可以称为『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』

    是一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。

  • candlestick K线图。

  • heatmap 热力图

    热力图主要通过颜色去表现数值的大小,必须要配合 visualMap 组件使用。

  • map 地图

  • parallel 平行坐标系

  • lines 路径图

    用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化。

  • graph 关系图

    用于展现节点以及节点之间的关系数据。

  • sankey 桑基图

    是一种特殊的流图(可以看作是有向无环图)。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。

  • funnel 漏斗图

  • gauge 仪表盘

  • pictorialBar 象形柱图

    象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。

  • themeRiver 主题河流

    是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。

  • custom 自定义系列

    自定义系列可以自定义系列中的图形元素渲染。从而能扩展出不同的图表。

    同时,echarts 会统一管理图形的创建删除、动画、与其他组件(如 dataZoom、visualMap)的联动,使开发者不必纠结这些细节。

label

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 emphasis 状态。

itemStyle 图形样式

barWidth 柱条的宽度,不设时自适应。