echarts的一些基础配置信息文档(基于地图路线) ---series

939 阅读11分钟

series里面的一些配置信息文档

series是什么:

series 是 ECharts 的一个配置项,用于设置数据系列。在地图数据可视化中,series 的配置通常用于设置地图上的各个区域的数据展示方式。series 是一个非常重要的配置项,它用来描述数据系列,可以包含多个数据点,用来在地图上绘制出相应的图形

下面是一些常见的 type 配置:
  1. line:折线图系列。
  2. bar:柱状图系列。
  3. pie:饼图系列。
  4. scatter:散点图系列。
  5. effectScatter:涟漪散点图系列,用于表现更加炫酷的效果。
  6. heatmap:热力图系列。
  7. map:地图系列,用于绘制地图。
  8. tree:树形图系列。
  9. treemap:矩形树图系列。
  10. funnel:漏斗图系列。
  11. gauge:仪表盘系列。
  12. boxplot:箱型图系列。
  13. parallel:平行坐标系列。
  14. sankey:桑基图系列。
  15. graph:关系图系列,如关系图、力导向布局等。
  16. lines:线图系列,如航线图、迁徙图等。
  17. themeRiver:主题河流系列,用于表现时间序列中的主题河流变化。
  18. pictorialBar:象形柱状图系列,用于表现各种生动有趣的柱状图形式。

以上是一些常见的 type 配置,ECharts 还有许多其他类型的图表系列。

下面是一些常见的 name 配置:

series 中,name 是一个非常基础的配置项,它用来描述数据系列的名称一般直接写需要对应的名称 在地图数据可视化中,seriesname 可以用来表示不同区域或不同类型的数据。下面是一些常见的 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 配置:

coordinateSystemseries 中的一个重要选项,用于指定数据系列所使用的坐标系类型。ECharts 中支持的坐标系类型包括:cartesian2dpolargeocalendarcustom 等。不同的坐标系类型支持的配置项也有所不同。下面简单介绍一下常见的坐标系类型及其配置项。

  1. cartesian2d 坐标系:该坐标系是二维笛卡尔坐标系,适用于折线图、散点图、柱状图等图表类型。常见的配置项包括:
  • xAxisIndex:指定数据所使用的 X 轴索引,默认为 0
  • yAxisIndex:指定数据所使用的 Y 轴索引,默认为 0
  • xAxisType:指定 X 轴的类型,可选值包括 valuecategorytimelog
  • yAxisType:指定 Y 轴的类型,可选值包括 valuecategorytimelog
  • xAxisyAxis:分别指定 X 轴和 Y 轴的具体配置项。
  1. polar 坐标系:该坐标系是极坐标系,适用于饼图、雷达图等图表类型。常见的配置项包括:
  • radiusAxisIndex:指定数据所使用的半径轴索引,默认为 0
  • angleAxisIndex:指定数据所使用的角度轴索引,默认为 0
  • startAngle:指定极坐标系起始角度,默认为 0
  • clockwise:指定极坐标系是否顺时针方向,默认为 true
  • radiusAxisangleAxis:分别指定半径轴和角度轴的具体配置项。
  1. geo 坐标系:该坐标系是地理坐标系,适用于地图等图表类型。常见的配置项包括:
  • map:指定要使用的地图类型。
  • roam:指定是否开启鼠标缩放和平移漫游,默认为 false
  • center:指定地图中心点的经纬度坐标。
  • zoom:指定地图缩放级别。
  • scaleLimit:指定地图的缩放范围。
  • itemStyle:指定地图中各个区域的样式。
  1. 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}
                }
           ```
    

上述配置中,normalemphasis 分别表示普通状态和高亮状态下的样式。在普通状态下,地图区域的填充颜色为白色,边框颜色为黑色,边框线宽为 0.5 像素,阴影颜色为黑色,阴影模糊大小为 10 像素。在高亮状态下,地图区域的填充颜色为橙色,边框颜色为黑色,边框线宽为 1 像素,阴影颜色为黑色,阴影模糊大小为 10 像素。