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 像素。