【 echarts 属性详解】

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 对象，可以设置字体大小、颜色、字体粗细等样式属性。

代码007普通

打赏 收藏 海报 链接