series
里面的一些配置信息文档
series是什么:
series
是 ECharts 的一个配置项,用于设置数据系列。在地图数据可视化中,series
的配置通常用于设置地图上的各个区域的数据展示方式。series
是一个非常重要的配置项,它用来描述数据系列,可以包含多个数据点,用来在地图上绘制出相应的图形
下面是一些常见的 type
配置:
line
:折线图系列。bar
:柱状图系列。pie
:饼图系列。scatter
:散点图系列。effectScatter
:涟漪散点图系列,用于表现更加炫酷的效果。heatmap
:热力图系列。map
:地图系列,用于绘制地图。tree
:树形图系列。treemap
:矩形树图系列。funnel
:漏斗图系列。gauge
:仪表盘系列。boxplot
:箱型图系列。parallel
:平行坐标系列。sankey
:桑基图系列。graph
:关系图系列,如关系图、力导向布局等。lines
:线图系列,如航线图、迁徙图等。themeRiver
:主题河流系列,用于表现时间序列中的主题河流变化。pictorialBar
:象形柱状图系列,用于表现各种生动有趣的柱状图形式。
以上是一些常见的 type
配置,ECharts 还有许多其他类型的图表系列。
下面是一些常见的 name
配置:
series
中,name
是一个非常基础的配置项,它用来描述数据系列的名称一般直接写需要对应的名称
在地图数据可视化中,series
的 name
可以用来表示不同区域或不同类型的数据。下面是一些常见的 name
配置:
'value'
:表示数值数据,如人口数量、GDP 等。'rank'
:表示数据排名,如各省份人口排名。'label'
:表示标签数据,如地名、行政区划等。'percent'
:表示百分比数据,如占比、增长率等。'index'
:表示数据指标,如经济发展指数、环境指数等。
需要注意的是,name
的具体配置取决于数据的实际情况和需求,以上只是一些常见的配置方式。在实际开发中,应该根据实际情况进行调整。
下面是一些常见的 zlevel
配置:
zlevel
是用来控制绘制图形的层级关系,即通过设置不同的 zlevel
值,可以让一些图形出现在其他图形的上面或下面,从而实现图层叠加的效果。
下面是一些常见的 zlevel
配置:
0
:表示默认的层级,大多数图形的zlevel
都是默认值。1
:表示在默认层级之上,用来放置需要更高层级的图形。-1
:表示在默认层级之下,用来放置需要更低层级的图形。
需要注意的是,zlevel
的具体配置取决于实际需求和图形的层级关系。在实际开发中,应该根据实际情况进行调整,确保图形之间的层级关系合理。
下面是一些常见的 effect
配置:
effect
是一个用来配置特效的选项。
effect
可以用来在地图上添加各种动态特效,如涟漪特效、线条特效等,增强地图的可视化效果。
下面是一些常见的 effect
配置:
'ripple'
:表示涟漪特效,用来在地图上添加水波纹效果,可以表现数据的分布情况。'line'
:表示线条特效,用来在地图上添加流动的线条效果,可以表现数据的变化趋势。'scatter'
:表示散点特效,用来在地图上添加多个小点的效果,可以表现数据的密度和分布情况。'none'
:表示没有特效。
需要注意的是,effect
的具体配置取决于实际需求和图形的特效效果。在实际开发中,应该根据实际情况进行调整,确保特效和数据之间的关系合理。同时,过多的特效会影响图形的性能,因此也需要注意性能问题。
``` series: [{
type: 'map',
map: 'world',
// 在series中配置effect选项
effect: {
show: true,
period: 6,
trailLength: 0,
color: '#E15536',
symbolSize: 10,
symbol: 'arrow'
},
// 其他配置项
data: [
// 数据点
]
}]
上述代码中,`effect` 配置选项包括以下属性:
* `show`:表示是否显示特效,默认为 `true`。
* `period`:表示特效动画的时间,单位为秒,默认为 `6`。
* `trailLength`:表示特效尾迹的长度,可以用来表现数据的持续性,默认为 `0`。
* `color`:表示特效的颜色,默认为 `#E15536`。
* `symbolSize`:表示特效图形的大小,默认为 `10`。
* `symbol`:表示特效图形的类型,可以是 `'arrow'`、`'pin'`、`'rect'` 等,默认为 `'arrow'`。
需要注意的是,不同类型的特效配置选项可能有所不同,具体应该根据实际需求进行调整。
## 下面是一些常见的 `lineStyle` 配置:
````js
``` lineStyle: {
normal: {
color: '#E15536',
width: 3,
curveness: 0.2,
type: 'dashed'
}
},
上述代码中,lineStyle
配置选项包括以下属性:
normal
:表示普通状态下的线条样式。color
:表示线条的颜色,默认为'auto'
。width
:表示线条的宽度,默认为1
。curveness
:表示线条的曲度,范围为 0-1,0 表示不曲折,1 表示非常曲折。默认值为0
。type
:表示线条的样式类型,可以取值为'solid'
、'dashed'
、'dotted'
等等。默认值为'solid'
。
需要注意的是,lineStyle
的具体配置取决于实际需求和图形的样式效果。在实际开发中,应该根据实际情况进行调整,确保样式和数据之间的关系合理。同时,过多的线条样式也会影响图形的性能,因此也需要注意性能问题。
下面是一些常见的 data
配置:
``` data: [ { name: '北京', value: [116.4, 39.9] }, { name: '上海', value: [121.5, 31.2] }, // 其他数据点 ],
name
:表示数据点的名称,用于在地图上标记点的位置。value
:表示数据点的经纬度坐标,是一个数组,第一个元素表示经度,第二个元素表示纬度。
下面是一些常见的 cursor
配置:
cursor
选项可以用来配置鼠标悬停在数据点上时的样式。常用的配置样式如下:
default
:鼠标的默认样式,通常是一个箭头。pointer
:鼠标的样式变成手型,表示可以点击。move
:鼠标的样式变成一个带有四个箭头的方块,表示可以移动。crosshair
:鼠标的样式变成十字线,通常用于指示当前的坐标位置。text
:鼠标的样式变成一个 I 型的光标,表示可以输入文本。- 注意:
cursor: 'auto'
并不是一种具体的鼠标指针样式,而是表示 ECharts 会自动选择最合适的鼠标指针样式。因此,在开发过程中,需要对数据点和 ECharts 实例的配置进行仔细的调试和测试,确保最终的样式效果符合预期
下面是一些常见的 coordinateSystem
配置:
coordinateSystem
是 series
中的一个重要选项,用于指定数据系列所使用的坐标系类型。ECharts 中支持的坐标系类型包括:cartesian2d
、polar
、geo
、calendar
和 custom
等。不同的坐标系类型支持的配置项也有所不同。下面简单介绍一下常见的坐标系类型及其配置项。
cartesian2d
坐标系:该坐标系是二维笛卡尔坐标系,适用于折线图、散点图、柱状图等图表类型。常见的配置项包括:
xAxisIndex
:指定数据所使用的 X 轴索引,默认为0
。yAxisIndex
:指定数据所使用的 Y 轴索引,默认为0
。xAxisType
:指定 X 轴的类型,可选值包括value
、category
、time
和log
。yAxisType
:指定 Y 轴的类型,可选值包括value
、category
、time
和log
。xAxis
和yAxis
:分别指定 X 轴和 Y 轴的具体配置项。
polar
坐标系:该坐标系是极坐标系,适用于饼图、雷达图等图表类型。常见的配置项包括:
radiusAxisIndex
:指定数据所使用的半径轴索引,默认为0
。angleAxisIndex
:指定数据所使用的角度轴索引,默认为0
。startAngle
:指定极坐标系起始角度,默认为0
。clockwise
:指定极坐标系是否顺时针方向,默认为true
。radiusAxis
和angleAxis
:分别指定半径轴和角度轴的具体配置项。
geo
坐标系:该坐标系是地理坐标系,适用于地图等图表类型。常见的配置项包括:
map
:指定要使用的地图类型。roam
:指定是否开启鼠标缩放和平移漫游,默认为false
。center
:指定地图中心点的经纬度坐标。zoom
:指定地图缩放级别。scaleLimit
:指定地图的缩放范围。itemStyle
:指定地图中各个区域的样式。
calendar
坐标系:该坐标系是日历坐标系,适用于日历热力图等图表类型。常见的配置项包括:
orient
:指定日历坐标系的排列方向,可选值为'horizontal'
或'vertical'
下面是一些常见的 rippleEffect
配置:
rippleEffect 是一种水波纹特效,可以用于强调图表数据变化或者交互事件。其配置选项包括:
show
:是否显示水波纹特效,默认为 false。brushType
:水波纹绘制方式,可选值为 'stroke' 或 'fill',默认为 'stroke'。scale
:水波纹的缩放比例,默认为 2.5。period
:水波纹动画周期,单位为秒,默认为 4。brushType
:水波纹绘制方式,可选值为 'stroke' 或 'fill',默认为 'stroke'。color
:水波纹颜色,默认为 '#000'。zlevel
:绘制水波纹的 Canvas 层级。z
:绘制水波纹的 z 坐标轴位置。rippleStyle
:水波纹样式配置,包括 rippleType(波纹类型,可选值为 'circle' 或 'rect')、shadowBlur(阴影模糊程度)、shadowColor(阴影颜色)等。
下面是一些常见的 label
配置:
label 用于对图表数据进行标注,可以显示在数据点、线条、区域等不同的图表元素上。其配置选项包括:
show
:是否显示标签,默认为 false。position
:标签位置,可选值为 'top'、'left'、'right'、'bottom'、'inside'、'insideLeft'、'insideRight'、'insideTop'、'insideBottom'、'insideTopLeft'、'insideBottomLeft'、'insideTopRight'、'insideBottomRight'。distance
:标签离图形元素的距离,在 position 为 'top'、'bottom'、'left'、'right' 时有效。formatter
:标签格式化函数或者字符串模板,支持异步回调函数。fontSize
:标签字体大小,默认为 12。color
:标签字体颜色,默认为 '#000'。fontWeight
:标签字体粗细,可选值为 'normal'、'bold'、'bolder'、'lighter'。fontStyle
:标签字体风格,可选值为 'normal'、'italic'、'oblique'。backgroundColor
:标签背景色,默认为 'transparent'。borderColor
:标签边框颜色,默认为 'transparent'。borderWidth
:标签边框宽度,默认为 0。borderRadius
:标签边框圆角半径。padding
:标签内边距,单位为像素。shadowColor
:标签阴影颜色。shadowBlur
:标签阴影模糊程度。shadowOffsetX
:标签阴影水平偏移量。shadowOffsetY
:标签阴影垂直偏移量。
``` label: { normal: { show: true, position: 'right', formatter: '{b}', color: '#333333' } },
在这个配置中,label
对象中只有 normal
配置项。它包括以下配置样式:
show
: 布尔类型,控制是否显示标签,默认为false
。position
: 标签位置,可以选择'top'
,'left'
,'right'
,'bottom'
,'inside'
,'insideLeft'
,'insideRight'
,'insideTop'
,'insideBottom'
,'insideTopLeft'
,'insideBottomLeft'
,'insideTopRight'
,'insideBottomRight'
等值,默认为'top'
。formatter
: 标签内容格式化函数,支持字符串模板和回调函数两种形式。color
: 标签文字颜色,默认为'#333333'
。
下面是一些常见的 itemStyle
配置:
itemStyle
用于设置图形元素的样式,包括线条颜色、填充颜色、边框颜色、边框宽度、阴影等等。下面是 itemStyle
中常用的配置样式:
color
: 颜色,可以是单个颜色或者渐变色对象。borderColor
: 边框颜色。borderWidth
: 边框线宽。opacity
: 图形透明度,支持从 0 到 1 的值。shadowColor
: 阴影颜色。shadowBlur
: 阴影模糊大小。shadowOffsetX
: 阴影水平偏移量。shadowOffsetY
: 阴影垂直偏移量。- 以地图数据可视化为例,以下是一个示例
itemStyle
配置对象 -
``` itemStyle: { normal: {areaColor: '#fff', borderColor: '#444', borderWidth: 0.5, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10}, emphasis: {areaColor: '#ffcc00', borderColor: '#000', borderWidth: 1, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10} } ```
上述配置中,normal
和 emphasis
分别表示普通状态和高亮状态下的样式。在普通状态下,地图区域的填充颜色为白色,边框颜色为黑色,边框线宽为 0.5 像素,阴影颜色为黑色,阴影模糊大小为 10 像素。在高亮状态下,地图区域的填充颜色为橙色,边框颜色为黑色,边框线宽为 1 像素,阴影颜色为黑色,阴影模糊大小为 10 像素。