
echarts配置项
文章平均质量分 94
一行注释
这个作者很懒,什么都没留下…
展开
-
echarts API 之events
鼠标事件的事件参数是事件对象的数据的各个属性,对于图表的点击事件,基本参数如下,其它图表诸如饼图可能会有部分附加参数。时不会发出,在其他的 dispatchAction 时,或者用户在界面中创建、删除、修改选框时会发出。ECharts 中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是 调用。前注册相关事件,否则在动画被禁用时,注册的事件回调可能因时序问题而不被执行。可触发此事件,用户点击不会触发此事件(用户点击事件请使用。可触发此事件,用户点击不会触发此事件(用户点击事件请使用。原创 2024-10-29 19:01:53 · 1088 阅读 · 0 评论 -
echarts API 之 echartsInstance
在大数据量的场景下(例如地理数的打点),就算数据使用二进制格式,也会有几十或上百兆,在互联网环境下,往往需要分片加载。有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用。合并得到的配置项和数据,也记录了用户交互的状态,例如图例的开关,数据区域缩放选择的范围等等。获取的是已经合并过默认值了的,所以在修改了某些配置项后会导致原本是根据这些配置项值去设置的默认值失效。剩余的情况,会在组件列表尾部创建新的组件。原创 2024-10-29 19:00:13 · 1230 阅读 · 0 评论 -
echarts API之echarts
元素作为容器,这样绘制完图表可以直接将 canvas 作为图片应用到其它地方,例如在 WebGL 中作为贴图,这跟使用。如果容器是隐藏的,ECharts 可能会获取不到 DIV 的高宽导致初始化失败,这时候可以明确指定 DIV 的。开始支持SVG 格式的数据。可以是字符串,也可以是解析得到的 SVG DOM 对象。将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看。可以是 JSON 字符串,也可以是解析得到的对象。解除图表实例的联动,如果只需要移除单个实例,可以将通过将该图表实例。原创 2024-10-29 18:58:49 · 812 阅读 · 0 评论 -
echarts其他属性
media,useUTC,hoverLayerThreshold,blendMode,animationDelayUpdate,darkMode,color,backgroundColor,animation,animationThreshold,animationDuration,animationEasing,animationDelay,animationDurationUpdate,animationEasingUpdate,animationDelayUpdate原创 2024-10-29 18:56:29 · 792 阅读 · 0 评论 -
echarts属性之series-textStyle
还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...指定 dash array 实现灵活的虚线效果。的时候,可以通过该属性配置末尾显示的文本。文字超出宽度是否截断或者换行。用于设置虚线的偏移量,可搭配。可实现更灵活的虚线效果。文字本身的阴影 X 偏移。文字本身的阴影 Y 偏移。数组,用以指定线条的。文字本身的描边颜色。文字本身的描边宽度。文字本身的描边类型。文字本身的阴影颜色。文字本身的阴影长度。原创 2024-10-29 18:48:43 · 521 阅读 · 0 评论 -
echarts属性之series-custom
自定义系列可以自定义系列中的图形元素渲染。从而能扩展出不同的图表。同时,echarts 会统一管理图形的创建删除、动画、与其他组件(如。原创 2024-10-29 18:47:44 · 1753 阅读 · 0 评论 -
echarts属性之series-themeRiver
如上所示,主题河流的数据格式是二维数组的形式,里层数组的每一项由事件或主题的时间属性、事件或主题在某个时间点的值,以及事件或主题的名称组成。值得注意的是,一定要提供一个具有完整时间段的事件或主题作为主干河流,其他事件或主题以该主干河流为依据,将缺省的时间点上的值补为0,也就是说其他事件或主题的时间段是包含在主干河流内的,如果超出,布局会出错,这么做的原因是,在计算整个图的布局的时候要计算一条baseline,以便将每个事情画成流带状。在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。原创 2024-10-29 18:45:58 · 877 阅读 · 0 评论 -
echarts属性之series-pictorialBar
数组项可用对象,其中的。原创 2024-10-29 18:44:19 · 1707 阅读 · 0 评论 -
echarts属性之series-gauge
用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。仪表盘半径,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。原创 2024-10-29 18:41:00 · 1278 阅读 · 0 评论 -
echarts属性之series-funnel
配置一对多或者多对一的动画中每个图形的动画延时,设置不同的动画延时可以给动画带来一定的趣味性。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。配置为数组意味着在动画的时候所有数组项指定的系列会合并为当前系列。原创 2024-10-29 18:39:47 · 758 阅读 · 0 评论 -
echarts属性之series-sankey
series-sankey桑基图是一种特殊的流图(可以看作是有向无环图)。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。示例:可视编码:桑基图将原数据中的每个node编码成一个小矩形,不同的节点尽量用不同的颜色展示,小矩形旁边的label编码的是节点的名称。此外,图中每两个小矩形之间的边编码的是原数据中的link,边的粗细编码的是link中的value。排序:如果想指定每层节点的顺序是按照data中的顺序排列的。可以设置layou原创 2024-10-29 18:37:22 · 832 阅读 · 0 评论 -
echarts属性之series-graph
series-graph关系图用于展现节点以及节点之间的关系数据。示例:所有属性series-graph.type= 'graph'stringseries-graph.idstring组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。series-graph.namestring系列名称,用于tooltip的显示,legend的图例筛选,在setOption更新数据和配置项时用于指定对应的系列。serie原创 2024-10-29 17:37:38 · 684 阅读 · 0 评论 -
echarts属性之series-lines
symbol 的角度会随着轨迹的切线变化,如果使用自定义 path 的 symbol,需要保证 path 图形的朝向是朝上的,这样在 symbol 沿着轨迹运动的时候可以保证图形始终朝着运动的方向。配置一对多或者多对一的动画中每个图形的动画延时,设置不同的动画延时可以给动画带来一定的趣味性。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。原创 2024-10-29 17:35:11 · 1571 阅读 · 0 评论 -
echarts属性之series-parallel
数据中,每一行是一个『数据项』,每一列属于一个『维度』。(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。原创 2024-10-29 17:31:43 · 997 阅读 · 0 评论 -
echarts属性之series-map
配置一对多或者多对一的动画中每个图形的动画延时,设置不同的动画延时可以给动画带来一定的趣味性。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。的时候,可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的正中间,并且保证不超出盒形的范围。为了较好的效果,不同的系列会默认有不同的配置,比如散点图这种图形比较小且复杂的默认采用了。相同的系列会在同一地图上显示,这时候使用第一个系列的配置项作为地图绘制的配置。原创 2024-10-29 17:30:33 · 1165 阅读 · 0 评论 -
echarts属性之series-heatmap
数组项可用对象,其中的。原创 2024-10-29 17:27:24 · 636 阅读 · 0 评论 -
echarts属性之series-candlestick
该配置项就是用于配置该系列每一帧渲染的图形数,可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。ECharts 4 开始全流程支持渐进渲染(progressive rendering),渲染的时候会把创建好的图形分到数帧中渲染,每一帧渲染只渲染指定数量的图形。配置一对多或者多对一的动画中每个图形的动画延时,设置不同的动画延时可以给动画带来一定的趣味性。为了较好的效果,不同的系列会默认有不同的配置,比如散点图这种图形比较小且复杂的默认采用了。转载 2024-10-29 17:26:01 · 1160 阅读 · 0 评论 -
echarts属性之series-boxplot
等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。配置一对多或者多对一的动画中每个图形的动画延时,设置不同的动画延时可以给动画带来一定的趣味性。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。在图形非常多的时候可以关闭以提升交互流畅性。为了较好的效果,不同的系列会默认有不同的配置,比如散点图这种图形比较小且复杂的默认采用了。原创 2024-10-29 17:23:35 · 784 阅读 · 0 评论 -
echarts属性之singleAxis
提示框组件可以设置在多种地方:可以设置在全局原创 2024-10-29 17:21:32 · 1077 阅读 · 0 评论 -
echarts属性之series-sunburst
它是一个数组,其中的第 0 项表示数据下钻后返回上级的图形,其后的每一项分别表示从圆心向外层的层级。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。原创 2024-10-29 17:20:45 · 860 阅读 · 0 评论 -
echarts属性之series-treemap
series-treemapTreemap是一种常见的表达『层级数据』『树状数据』的可视化形式。它主要用面积的方式,便于突出展现出『树』的各层级中重要的节点。示例:视觉映射:treemap 首先是把数值映射到『面积』这种视觉元素上。此外,也支持对数据的其他维度进行视觉映射,例如映射到颜色、颜色明暗度上。关于视觉设置,详见series-treemap.levels。下钻(drill down):drill down功能即点击后才展示子层级。 设置了leafDepth原创 2024-10-29 17:16:35 · 1291 阅读 · 0 评论 -
echarts属性之series-tree
默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。在图形非常多的时候可以关闭以提升交互流畅性。树图主要用来可视化树形数据结构,是一种特殊的层次类型,具有唯一的根节点,左子树,和右子树。原创 2024-10-29 17:15:39 · 1432 阅读 · 0 评论 -
echarts属性之series-radar
这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。路径图形会自适应调整为合适的大小。配置一对多或者多对一的动画中每个图形的动画延时,设置不同的动画延时可以给动画带来一定的趣味性。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。原创 2024-10-29 17:14:53 · 1176 阅读 · 0 评论 -
echarts属性之series-effectScatter
数组项可用对象,其中的。原创 2024-10-29 17:13:57 · 1499 阅读 · 0 评论 -
echarts属性之series-scatter
数组项可用对象,其中的。原创 2024-10-29 17:12:46 · 1037 阅读 · 0 评论 -
echarts属性之pie
从 ECharts v4.6.0 版本起,我们提供了。原创 2024-10-29 16:54:38 · 430 阅读 · 0 评论 -
echarts属性之series-bar
数组项可用对象,其中的。原创 2024-10-29 16:52:53 · 1014 阅读 · 0 评论 -
echarts属性之series-line
series-line折线/面积图折线图是用折线将各个数据点标志连接起来的图表,用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。Tip:设置areaStyle后可以绘制面积图。Tip:配合分段型visualMap组件可以将折线/面积图通过不同颜色分区间。如下示例所有属性series-line.type= 'line'stringseries-line.idstring组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用原创 2024-10-29 16:48:58 · 1040 阅读 · 0 评论 -
echarts属性之dataset
组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射。除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。中对个维度的显示,会变为『竖排』,从而方便显示每个维度的名称。一般来说,原始数据表达的是二维表。按行的 key-value 形式(对象数组),其中键(key)表明了。大多数场景下,transform 只会产出一个结果,所以大多数情况下。会横排显示,且只显示数值没有维度名称可显示。注意:“第一行/列” 的意思是,如果。都没有被指定,那么默认会使用。原创 2024-10-29 16:47:36 · 714 阅读 · 0 评论 -
echarts属性之dataset
组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射。除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。中对个维度的显示,会变为『竖排』,从而方便显示每个维度的名称。一般来说,原始数据表达的是二维表。按行的 key-value 形式(对象数组),其中键(key)表明了。大多数场景下,transform 只会产出一个结果,所以大多数情况下。会横排显示,且只显示数值没有维度名称可显示。注意:“第一行/列” 的意思是,如果。都没有被指定,那么默认会使用。原创 2024-10-29 16:46:48 · 1023 阅读 · 0 评论 -
echarts属性之calendar
在ECharts中,我们非常有创意地实现了日历图,是通过使用日历坐标系组件来达到日历图效果的,如下方的几个示例图所示,我们可以在热力图、散点图、关系图中使用日历坐标系。在日历坐标系可以水平放置,也可以垂直放置。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。另外,日历上的『月份』和『星期几』的文字,也可以较方便的切换中英文,甚至自定义。灵活利用 echarts 图表和坐标系的组合,以及 API,可以实现更丰富的效果。原创 2024-10-29 16:45:08 · 1099 阅读 · 0 评论 -
echarts属性之graphic
是原生图形元素组件。可以支持的图形元素包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,下面示例中,使用图形元素做了水印,和文本块:下面示例中,使用隐藏的图形元素实现了拖拽:graphic 设置介绍只配一个图形元素时的简写方法:配多个图形元素:使用 setOption 来删除或更换(替代)已有的图形元素:注意,如果没有指定 id,第二次 setOption原创 2024-10-29 16:44:12 · 3190 阅读 · 0 评论 -
echarts属性之timeline
这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。原创 2024-10-29 16:41:49 · 929 阅读 · 0 评论 -
echarts属性之parallelAxis
数据中,每一行是一个『数据项』,每一列属于一个『维度』。(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。原创 2024-10-29 16:39:25 · 844 阅读 · 0 评论 -
echarts属性之parallel
(例如上面数据每一列的含义分别是:『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。的对象,分别表示数据的最大最小值,这个函数可返回坐标轴的最小值,也可返回。原创 2024-10-29 16:38:21 · 589 阅读 · 0 评论 -
echarts属性之geo
geo地理坐标系组件。地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图,线集。原创 2024-10-29 16:37:27 · 1728 阅读 · 0 评论 -
echarts属性brush
如果没有指定为『坐标系 brush』,就是『全局 brush』。如果没有指定为『坐标系 brush』,就是『全局 brush』。如果没有指定为『坐标系 brush』,就是『全局 brush』。如果没有指定为『坐标系 brush』,就是『全局 brush』。是区域选择组件,用户可以选择图中一部分数据,从而便于向用户展示被选中数据,或者他们的一些统计计算结果。配置项是一个数组,内容是 seriesIndex,指定了哪些 series 可以被联动。大多数情况下,inBrush 可以不指定,维持本来的视觉配置。原创 2024-10-29 16:36:27 · 1003 阅读 · 0 评论 -
echarts属性toolbox
值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。由于 icon 的文本信息只在 icon hover 时候才显示,所以文字相关的配置项请在。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。除了各个内置的工具按钮外,还可以自定义工具按钮。原创 2024-10-29 16:35:09 · 755 阅读 · 0 评论 -
echarts属性之axisPointer
params.value: 轴当前值,如果 axis.type 为 'category' 时,其值为 axis.data 里的数值。还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。axisPointer内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。原创 2024-10-29 16:34:22 · 1449 阅读 · 0 评论 -
echarts属性之tooltip
ECharts 中的 tooltip 提示框组件,包括其触发类型、坐标轴指示器配置、浮层显示设置以及文本样式等方面的内容。原创 2024-10-29 16:32:11 · 5118 阅读 · 0 评论