title标题
legend图例
grid直角坐标系内绘图网
xAxis直角坐标系 grid 中的 x 轴
yAxis直角坐标系 grid 中的 y 轴
polar极坐标系
radiusAxis极坐标系的径向轴
angleAxis极坐标系的角度轴
radar雷达图坐标系组件
dataZoom区域缩放
visualMap 是视觉映射组件
tooltip提示框组件
axisPointer这是坐标轴指示器(axisPointer)的全局公用设置
toolbox工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
brush是区域选择组件
geo地理坐标系组件
parallel平行坐标系介绍
parallelAxis这个组件是平行坐标系中的坐标轴
singleAxis单轴。可以被应用到散点图中展现一维数据.
timeline提供了在多个 ECharts option 间进行切换、播放等操作的功能
graphic 是原生图形元素组件
- 可以支持的图形元素包括:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
calendar日历坐标系组件
dataset数据集组件
aria支持无障碍富互联网应用规范集的组件(WAI-ARIA)
series正八经的图的绘制的方法
一下不同的图的区别都是体现在相同的series属性下的type上
series-line折线/面积图
series-bar柱状图
series-pie饼图
- 环形图环内字体设置
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
series-scatter散点(气泡)图
series-effectScatter带有涟漪特效动画的散点(气泡)图
series-radar雷达图
浮层图
...
tooltip{
trigger:"axis" //触发器类型
}
...
series: [
{
name: "事件等级",
type: "radar",
tooltip: {
trigger: "item",//触发器内容
},
]
...
series-tree 树图
series-treemap它主要用面积的方式,便于突出展现出『树』的各层级中重要的节点
series-sunburst旭日图(Sunburst)由多层的环形图组成
series-boxplot分散情况资料的统计图
中文可以称为『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』,是一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。
series-candlestick K线图
series-heatmap热力图
series-map地图
series-parallel平行坐标系的系列
series-lines路径图
series-graph关系图
series-sankey桑基图
series-funnel漏斗图
series-gauge仪表盘
series-pictorialBar象形柱图
series-themeRiver是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化
series-custom自定义系列
darkMode是否是暗黑模式
color调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色
默认:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
backgroundColor背景色,默认无背景
textStyle全局的字体样式
animation是否开启动画
animationThreshold是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画
animationDuration初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果
animationEasing初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
animationDelay初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
animationDurationUpdate数据更新动画的时长
animationEasingUpdate数据更新动画的缓动效果
animationDelayUpdate数据更新动画的延迟
支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
stateAnimation状态切换的动画配置,支持在每个系列里设置单独针对该系列的配置。
blendMode图形的混合模式
图形的混合模式,不同的混合模式见 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation 。
默认为 'source-over'
。 支持每个系列单独设置。
'lighter'
也是比较常见的一种混合模式,该模式下图形数量集中的区域会颜色叠加成高亮度的颜色(白色)。常常能起到突出该区域的效果。见示例 全球飞行航线