首页 前端知识 【 echarts 属性详解】

【 echarts 属性详解】

2024-01-24 15:01:01 前端知识 前端哥 196 800 我要收藏

echarts 属性详解

title

图表的标题,包括主标题和副标题

  • text: 主标题文本内容,字符串类型。
  • text: 主标题文本内容,字符串类型。
  • subtext: 副标题文本内容,字符串类型。
  • left: 主副标题水平位置,可以设置为像素值、百分比,或者预设的字符串值(例如’left’, ‘center’, ‘right’)。
  • top: 主副标题垂直位置,同样可以设置为像素值、百分比或预设的字符串值。
  • textAlign: 主副标题文本水平对齐方式,可选值为’left’, ‘center’, ‘right’。
  • textStyle: 主副标题文本样式,是一个 JavaScript 对象,可以设置字体大小、颜色、字体粗细等样式属性。
tooltip

提示框组件,用于显示数据项的详细信息,可以自定义显示内容和样式。

  • trigger: 提示框触发类型,可选值有’item’(数据项触发),‘axis’(坐标轴触发),‘none’(不触发)。也可以通过设置回调函数来自定义触发方式。
  • axisPointer: 坐标轴指示器的相关配置,包括类型、线条样式、标签等。
  • formatter: 提示框的内容格式化函数,可以通过函数参数的方式获取到提示框显示的数据,从而进行格式化处理。
  • backgroundColor: 提示框的背景色,可以设置为颜色值或渐变对象。
  • padding: 提示框的内边距,是一个数组,分别表示上、右、下、左四个方向的内边距大小。
legend

图例组件,用于展示数据系列的标识和名称,支持点击切换系列的显示状态。

  • data: 图例的数据,是一个数组,每个元素对应一个系列的名称。
  • type: 图例的类型,可选值为’plain’(普通图例)、‘scroll’(可滚动图例)。
  • orient: 图例的布局方式,可选值为’horizontal’(水平布局)、‘vertical’(垂直布局)。
  • selectedMode: 图例的选中模式,可选值为’multiple’(多选)和’single’(单选)。
  • left: 图例组件的水平位置,可以设置为像素值、百分比或预设的字符串值。
  • top: 图例组件的垂直位置,同样可以设置为像素值、百分比或预设的字符串值。
  • itemWidth: 图例标记的宽度,可以设置为像素值。
  • itemHeight: 图例标记的高度,可以设置为像素值。
grid

直角坐标系内绘图网格,可以设置位置、大小和样式等属性。

  • left: 网格组件左侧位置,可以设置为像素值、百分比或预设的字符串值。

  • right: 网格组件右侧位置,同样可以设置为像素值、百分比或预设的字符串值。

  • top: 网格组件顶部位置,同样可以设置为像素值、百分比或预设的字符串值。

  • bottom:网格组件底部位置,同样可以设置为像素值、百分比或预设的字符串值。

  • containLabel: 网格是否包含坐标轴的刻度标签,默认值为false,表示不包含。

  • backgroundColor: 网格的背景色,可以设置为颜色值或渐变对象。

  • borderColor: 网格的边框颜色,可以设置为颜色值。

  • borderWidth: 网格的边框宽度,可以设置为像素值。

  • tooltip: 网格的提示框配置,可以覆盖全局的tooltip配置。

xAxis 和 yAxis

直角坐标系中的 x 轴,支持多个坐标系和轴线样式的配置,

直角坐标系中的 y 轴,支持多个坐标系和轴线样式的配置。

  • type: 坐标轴类型,可选值为’value’(数值轴)、‘category’(类目轴)、‘time’(时间轴)、‘log’(对数轴)。
  • name: 坐标轴名称,字符串类型。
  • nameLocation: 坐标轴名称的位置,可选值为’start’(起始位置)、‘middle’(中间位置)、‘end’(结束位置)。
  • nameGap: 坐标轴名称与轴线之间的距离。
  • nameTextStyle: 坐标轴名称的样式,同样是一个 JavaScript 对象,可以设置字体大小、颜色、字体粗细等样式属性。
  • axisLine: 坐标轴轴线的样式,是一个 JavaScript 对象,可以设置线条颜色、宽度、类型等样式属性。
  • axisTick: 坐标轴刻度线的样式,也是一个 JavaScript 对象,可以设置线条颜色、宽度、长度等样式属性。
  • axisLabel: 坐标轴刻度标签的样式,同样是一个 JavaScript 对象,可以设置字体大小、颜色、字体粗细等样式属性。
  • splitLine: 坐标轴网格线的样式,同样是一个 JavaScript 对象,可以设置线条颜色、宽度、类型等样式属性。
  • splitArea: 坐标轴刻度区域的样式,也是一个 JavaScript 对象,可以设置背景色、边框线样式等属性。
axisTick
  • show: 是否显示刻度线。
  • alignWithLabel: 刻度线与刻度标签是否对齐,默认值为false。
  • interval: 刻度线的显示间隔,可以设置为数字,表示每隔多少个刻度线显示一个,也可以设置为字符串’auto’,表示自动计算间隔。
  • inside: 刻度线是否朝内显示,默认值为false。
  • length: 刻度线的长度,可以设置为像素值。
  • lineStyle: 刻度线的样式,同样是一个 JavaScript 对象,可以设置线条颜色、宽度、类型等样式属性。
series

数据系列,包括折线图、柱状图、散点图、饼图等,可以设置系列的类型、数据、样式和标注等属性

  • type: 系列类型,可选值为’line’(折线图)、‘bar’(柱状图)、‘pie’(饼图)等。
  • name: 系列名称。
  • data: 系列的数据,是一个数组,数组中每个元素代表一个数据项。
  • itemStyle: 系列的样式,是一个 JavaScript 对象,可以设置线条颜色、宽度、类型等样式属性。
  • label: 系列的标签样式,同样是一个 JavaScript 对象,可以设置字体大小、颜色、字体粗细等样式属性。
  • barWidth: 柱状图的柱宽,可以设置为像素值或百分比。
  • barCategoryGap: 柱状图的柱间距离,可以设置为像素值或百分比。
  • barGap: 柱状图的系列间距离,可以设置为像素值或百分比。
  • smooth: 折线图是否平滑显示,默认值为false。
  • symbol: 折线图的标记点样式,可以设置为’circle’、‘rect’、'triangle’等值。
  • symbolSize: 折线图的标记点大小,可以设置为像素值。
  • radius: 饼图的半径,可以设置为像素值或百分比。
  • center: 饼图的圆心坐标,可以设置为像素值或百分比。
  • roseType: 饼图的玫瑰图类型,可选值为’radius’和’area’。
  • labelLine: 饼图的标签线样式,是一个 JavaScript 对象,可以设置线条颜色、宽度、类型等样式属性。
  • label: 饼图的标签样式,同样是一个 JavaScript 对象,可以设置字体大小、颜色、字体粗细等样式属性。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/230.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!