首页 前端知识 十一、Echart图表 之 series-line折线图(面积图)基本使用与配置大全

十一、Echart图表 之 series-line折线图(面积图)基本使用与配置大全

2024-04-29 11:04:46 前端知识 前端哥 552 366 我要收藏

🍓 作者主页:💖仙女不下凡💖

🍓 前言介绍:以下👇内容是我个人对于该技术的总结,如有不足与错误敬请指正!

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注!

🍓Echart官网地址:https://echarts.apache.org/examples/zh/index.html#chart-type-line


  • label:图形上的文本标签。(偶尔用)
  • endLabel:折线端点的标签。(不常用)
  • labelLine:标签的视觉引导线配置。(不常用)
  • labelLayout:标签的统一布局配置。(不常用)
  • itemStyle:折线拐点标志的样式。
  • lineStyle:线条样式。
  • areaStyle:区域填充样式。设置后显示成区域面积图。
  • emphasis:折线图的高亮状态。
  • blur:折线图的淡出状态。开启emphasis.focus后有效。
  • select:折线图的选中状态。开启selectedMode后有效。
  • data:数据内容数组
  • markPoint:图表标注。
  • markLine:图表标线。
  • markArea:图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。
  • universalTransition:全局过渡动画相关的配置。
  • tooltip:本系列特定的tooltip 设定。参考tooltip全局组件

💕 series-line折线图(面积图)配置属性,具体使用请参考一下内容

series: [{
  type: 'line', //这个配置表示折线图
  id: '', // 组件id,默认不指定
  name: '',  // 系列名称,用于tooltip显示,legend图例筛选,在setOption更新数据和配置项时用于指定对应的系列
  colorBy: 'series', //option.color中取色的策略,属性值:series同一系列中的所有数据都是用相同的颜色/data每个数据项都使用不同的颜色
  coordinateSystem: 'cartesian2d', //该系列使用的坐标系,属性值:cartesian2d(默认)/polar(极坐标)
  xAxisIndex: 0,  //使用x轴的index,在单个图表实例中存在多个x轴的时候有用
  yAxisIndex: 0,  //使用y轴的index,在单个图表实例中存在多个y轴的时候有用
  polarIndex: 0,  //使用的极坐标系的 index
  symbol: 'emptyCircle', //标记的图形。
  symbolSize: 4, //标记的大小
  symbolRotate: (value: Array|number, params: Object) => number, //标记的旋转角度(而非弧度)
  symbolKeepAspect: false,  //若symbol是path:// 的形式,是否在缩放时保持该图形的长宽比
  symbolOffset: [0, 0],  //标记相对于原本位置的偏移
  showSymbol: true,  //是否显示symbol, 如果false则只有在tooltip hover时显示。
  showAllSymbol: 'auto', //只在主轴为类目轴(axis.type 为 'category')时有效。 可选值:auto默认,如果有足够空间则显示标志图形,否则随主轴标签间隔隐藏策略/true:显示所有图形/false:随主轴标签间隔隐藏策略
  legendHoverLink: true, //是否启用图例hover时联动高亮
  stack: '', //数据堆叠,可选值:Total...
  stackStrategy: 'samesign', //堆积数值的策略,可选值:samesign(默认)/all/positive/negative
  cursor: 'pointer', //鼠标悬浮
  connectNulls: false, //是否连接空数据
  clip: true, //是否裁剪超出坐标系部分的图形
  triggerLineEvent: false, //线条和区域面积是否触发事件
  step: false, //是否是阶梯线图
  label: {
    show: false,
    position: 'top', 
    distance: 5, //距离图形元素的距离
    rotate: 0, //标签旋转
    offset: 0, //是否对文字进行偏移, 如[30,40],30,40
    formatter: ..., //标签内容格式器, 这个可以写值可以写函数接值,不展开说明了
    color: '#fff',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontFamily: 'sans-serif',
    fontSize: 12,
    align: ..., //文字水平对齐方式,默认自动。可选值:left/center/right
    verticalAlign: ..., //文字垂直对齐方式,默认自动。可选值:top/middle/bottom
    lineHeight: ...,
    backgroundColor: 'transparent',
    borderColor: ...,
    borderWidth: 0,
    borderType: 'solid', //可选值:solid/dashed/dotted
    borderDashOffset: 0,
    borderRadius: 0,
    padding: 0,
    shadowColor: 'transparent',
    shadowBlur: 0,
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    width: ...,
    height: ...,
    textBorderColor: ..., //文字本身的描边颜色
    textBorderWidth: ..., //文字本身的描边宽度
    textBorderType: 'solid', //可选值:solid/dashed/dotted
    textBorderDashOffset: 0, 
    textShadowColor: 'transparent',
    textShadowBlur: 0,
    textShadowOffsetX: 0,
    textShadowOffsetY: 0,
    overflow: 'none',
    ellipsis: '', //在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本
    rich: {}, //富文本标签,可以与formatter配合使用,不展开说明具体参考富文本标签
  },
  endLabel: {}, //参考label里面的属性,但是endLabel里面没有position属性
  labelLine: {
    show: ..,
    showAbove: ..., //是否显示在图形上方
    length2: ..., //视觉引导项第二段的长度
    smooth: false, //是否平滑视觉引导线,默认不平滑
    minTurnAngle: ...,
    lineStyle: {  //标签的视觉引导线的线的样式
      color: '#000',
      width: 1,
      type: 'solid',
      dashOffset: 0, //用于设置虚线的偏移量,可搭配 type 指定 dash array 实现灵活的虚线效果
      cap: 'butt', //用于指定线段末端的绘制方式
      join: 'bevel', //用于设置2个长度不为0的相连部分,可选值:bevel/round/miter
      miterLimit: 10, //用于设置斜接面限制比例
      shadowBlur: ...,
      shadowColor: ...,
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      opacity: 1
    }
  },
  labelLayout: {
    hideOverlap: ..., //是否隐藏重叠的标签
    moveOverlap: ..., //在标签重叠的时候是否挪动标签位置以防止重叠
    x: ..., //标签的 x 位置。支持绝对的像素值或者'20%'这样的相对值。
    y: ..., //参考x
    dx: ..., //标签在 x 方向上的像素偏移。可以和x一起使用。
    dy: ..., //参考x
    rotate: ..., //标签旋转角度
    width: ..., //标签显示的宽度
    height: ...,
    align: ..., //标签水平对齐方式。可以设置'left', 'center', 'right'
    verticalAlign: ..., //标签垂直对齐方式。可以设置'top', 'middle', 'bottom'
    fontSize: ..., 
    draggable: ..., //标签是否可以允许用户通过拖拽二次调整位置。
    labelLinePoints: ... //标签引导线三个点的位置。格式为:[[x, y], [x, y], [x, y]]
  },
  lineStyle: {}, //参考上面的labelLine.lineStyle
  areaStyle: {
    color: '#000',
    origin: 'auto', //图形区域的起始位置。可选值:auto/start/end/number
    shadowBlur: ...,
    shadowColor: ...,
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    opacity: 0.7
  },
  emphasis: {
    disabled: false,  //是否关闭高亮状态。默认false
    scale: true, //是否开启 hover 在拐点标志上的放大效果
    focus: 'none',  //高亮图形时,是否淡出其它数据图形已达到聚焦的效果。属性值:none/self/series
    blurScope: 'coordinateSystem',  //在开启focus时,可以通过blurScope配置淡出的范围
    label: {}, //参考上面的label
    labelLine: {}, //参考上面的labelLine
    itemStyle: {}, //参考上面的itemStyle
    lineStyle: {}, //参考上面的lineStyle
    areaStyle: {},  //参考上面areaStyle配置
    endLabel: {} //参考label里面的属性,但是endLabel里面没有position属性
  },
  blur: {
    label: {}, //参考上面的label
    labelLine: {}, //参考上面的labelLine
    itemStyle: {}, //参考上面的itemStyle
    lineStyle: {}, //参考上面的lineStyle
    areaStyle: {},  //参考上面areaStyle配置
    endLabel: {} //参考label里面的属性,但是endLabel里面没有position属性
  },
  select: {
    label: {}, //参考上面的label
    labelLine: {}, //参考上面的labelLine
    itemStyle: {}, //参考上面的itemStyle
    lineStyle: {}, //参考上面的lineStyle
    areaStyle: {},  //参考上面areaStyle配置
    endLabel: {} //参考label里面的属性,但是endLabel里面没有position属性
  },
  selectedMode: false, //选中模式的配置, 可选值:single/multiple/series
  smooth: false, //是否平滑曲线显示
  smoothMonotone: ..., //折线平滑后是否在一个维度上保持单调性,可以设置成'x', 'y'来指明是在 x 轴或者 y 轴上保持单调性
  sampling: ..., //折线图在数据量远大于像素点时候的降采样策略,开启后可以有效的优化图表的绘制效率,默认关闭,也就是全部绘制不过滤数据点
  dimensions: ...,
  encode: ...,
  seriesLayoutBy: 'column',
  datasetIndex: 0,
  dataGroupId: ...
  data: [{}],
  markPoint: {},
  markLine: {},
  markArea: {},
  zlevel: 0,
  z: 2,
  silent: false,
  animation: true,
  animationThreshold: 2000,
  animationDuration: 1000,
  animationEasing: 'linear',
  animationDelay: 0,
  animationDurationUpdate: 300,
  animationEasingUpdate: 'cubicInOut',
  animationDelayUpdate: 0,
  universalTransition: {},
  tooltip: {}
}]

👉推荐相关文章:Echart图表 之 基本使用及配置项

👉推荐相关文章:Echart图表 之 title配置项大全

👉推荐相关文章:Echart图表 之 颜色color配置项大全

👉推荐相关文章:Echart图表 之 X轴(xAxis)与 Y轴(yAxis)配置项大全

👉推荐相关文章:Echart图表 之 legend图例组件配置项大全

👉推荐相关文章:Echart图表 之 tooltip提示框组件配置项大全

👉推荐相关文章:Echart图表 之 toolbox工具栏组件配置项大全

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6261.html
标签
评论
发布的文章

@JsonCreator和@JsonValue

2024-05-05 22:05:05

Python 字符串转换为 JSON

2024-05-05 22:05:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!