折线柱状图配置项

样式

X轴标题

图表X轴标题

  • ECharts代码属性:xAxis.name
  • 图片示例:

Y轴标题

图表Y轴标题

  • ECharts代码属性:yAxis.name
  • 图片示例:

右Y轴标题

图表右Y轴标题(只支持双Y轴的)

  • ECharts代码属性:yAxis.name
  • 图片示例:

背景色

图表背景色

  • ECharts代码属性:grid.backgroundColor
  • 图片示例:

透明度

图表背景色的透明度

  • ECharts代码属性:grid.backgroundColor
  • 图片示例:

边框颜色

图表边框的颜色(需边框宽度大于0)

  • ECharts代码属性:grid.borderColor
  • 图片示例:

边框宽度

图标边框的宽度

  • ECharts代码属性:grid.borderWidth

边框透明度

图表边框颜色的透明度

  • ECharts代码属性:grid.borderColor
  • 图片示例:

X轴设置-显示标签

X轴标签是否展示

  • ECharts代码属性:xAxis.axisLabel.show
  • 图片示例:

标签数值

图表是否显示标签数值

  • ECharts代码属性:series.label.normal.show
  • 图片示例:

提示信息

鼠标划入图表节点是否展示提示信息

  • ECharts代码属性:tooltip.show
  • 图片示例:

动画

是否开启动画

  • ECharts代码属性:animation

倾斜(旋转时可用)

X轴标签是否旋转50度

  • ECharts代码属性:xAxis.axisLabel.rotate
  • 图片示例:

标签间隔数

标签之间的间隔距离

  • ECharts代码属性:xAxis.axisLabel.interval
  • 图片示例:

标签配色库

调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。

  • ECharts代码属性:color
  • 图片示例:

Y轴设计-Y轴数据

图表Y轴刻度数据是否显示

  • ECharts代码属性:yAxis.axisLabel.show
  • 图片示例:

左Y轴最大值

设置左Y轴最大值

  • ECharts代码属性:yAxis.max
  • 图片示例:

最小值

设置左Y轴最小值

  • ECharts代码属性:yAxis.min
  • 图片示例:

前缀

设置左Y轴标签数值的前缀

  • ECharts代码属性:yAxis.axisLabel.formatter
  • 图片示例:

后缀

设置左Y轴标签数值的后缀

  • ECharts代码属性:yAxis.axisLabel.formatter
  • 图片示例:

右Y轴最大值

设置右Y轴最大值(只支持双Y轴的)

  • ECharts代码属性:yAxis.max
  • 图片示例:

最小值

设置右Y轴最小值(只支持双Y轴的)

  • ECharts代码属性:yAxis.min
  • 图片示例:

前缀

设置右Y轴标签数值的前缀(只支持双Y轴的)

  • ECharts代码属性:yAxis.axisLabel.formatter
  • 图片示例:

后缀

设置右Y轴标签数值的后缀(只支持双Y轴的)

  • ECharts代码属性:yAxis.axisLabel.formatter
  • 图片示例:

水平区分线-跨度

坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

  • ECharts代码属性:yAxis.splitNumber
  • 图片示例:

颜色

分割线的颜色

  • ECharts代码属性:xAxis.splitLine.lineStyle.color
  • 图片示例:

宽度

分割线的宽度

  • ECharts代码属性:xAxis.splitLine.lineStyle.width
  • 图片示例:

透明度

分割线颜色的透明度

  • ECharts代码属性:xAxis.splitLine.lineStyle.color
  • 图片示例:

虚线

分割线是虚线

  • ECharts代码属性:xAxis.splitLine.lineStyle.type
  • 图片示例:

启用区间色

是否启用区间色(默认色:”rgba(250,250,250,0.3)”, “rgba(200,200,200,0.3)”)

  • ECharts代码属性:xAxis.splitArea.show
  • 图片示例:

区间色

用户自定义区间色

  • ECharts代码属性:xAxis.splitArea.areaStyle.color
  • 图片示例:

透明度

用户自定义区间色的透明度

  • ECharts代码属性:xAxis.splitArea.areaStyle.color
  • 图片示例:

垂直区分线(折线图或面积图有效)-颜色

坐标轴的分割线的颜色(配合宽度使用)

  • ECharts代码属性:yAxis.splitLine.lineStyle.color
  • 图片示例:

宽度

坐标轴的分割线的宽度

  • ECharts代码属性:yAxis.splitLine.lineStyle.width

透明度

坐标轴的分割线的透明度

  • ECharts代码属性:yAxis.splitLine.lineStyle.color
  • 图片示例:

启用区间色

是否启用区间色(默认色:”rgba(250,250,250,0.3)”, “rgba(200,200,200,0.3)”)

  • ECharts代码属性:yAxis.splitArea.show
  • 图片示例:

区间色

用户自定义区间色

  • ECharts代码属性:yAxis.splitArea.areaStyle.color
  • 图片示例

透明度

用户自定义区间色的透明度

  • ECharts代码属性:xAxis.splitArea.areaStyle.color
  • 图片示例:
最后编辑: 呼丽华  文档更新时间: 2024-03-05 11:49   作者:呼丽华