官网地址：https://gallery.echartsjs.com/explore.html#charts=barsort=ranktimeframe=all~author=all
该文档参考于这个博客 https://www.cnblogs.com/1996zy/p/8963385.html
1、title 图表标题
title: {
show: true, //是否显示标题组件 true显示 false隐藏
text: "我是这个图表的标题", //主标题文本，支持使用 \n 换行。
x: "left", // 标题水平位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right'¦ {number}（x坐标，单位px）
y: "top", // 标题垂直位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
textAlign: "left", // 标题的水平对齐方式，可选为：left’ | ‘right’ | ‘center |string
backgroundColor: "pink", // 标题背景色 string
borderColor: "green", // 标题边框颜色 string
borderWidth: 2, // 标题边框线宽，单位px，默认为0（无边框）
padding: 50, // 标题内边距，单位px，默认各方向内边距为5， // 接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，`
textStyle: {
fontSize: 28, // 主标题文字大小
fontWeight: "bolder", //主标题文字字体的粗细。 'normal','bold','bolder','lighter',100 | 200 | 300 | 400
color: "orange", // 主标题文字颜色
},
subtext: "我是副标题", //副标题文本，支持使用 \n 换行。 string
subtextStyle: { //副标题样式设置
fontSize: 14,
fontWeight: "bolder", //主标题文字字体的粗细。 'normal','bold','bolder','lighter',100 | 200 | 300 | 400
color: "#aaa", // 副标题文字颜色 string
},
}
2、legend 图例
legend: {
type: "scroll", //图例的类型。可选值： 'plain'：普通图例。缺省就是普通图例。 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
top: 'auto', //图例组件离容器上侧的距离。 string number
orient: "horizontal", // 布局方式，默认为水平布局，可选为：// 'horizontal'水平方向 ¦ 'vertical'垂直方向
x: "center", // 水平安放位置，默认为全图居中，可选为：// 'center' ¦ 'left' ¦ 'right'// ¦ {number}（x坐标，单位px）
y: "top", // 垂直安放位置，默认为全图顶端，可选为： // 'top' ¦ 'bottom' ¦ 'center'// ¦ {number}（y坐标，单位px）
backgroundColor: "rgba(0,0,0,0)",
borderColor: "#ccc", // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5， // 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10， // 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: "#333", // 图例文字颜色
},
},
3、grid网格
（单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图））
grid: {
show: true, //是否显示直角坐标系网格。
left: "5%", //组件离容器左侧的距离。 number/string, top 的值可以是20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
right: "5%", //组件离容器右侧的距离。 number/string, right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
bottom: "5%", //组件离容器下侧的距离。 number/string,bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
top: "10%", //组件离容器上侧的距离。 number/string top 的值可以是20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
width: "auto", //组件的宽度。默认自适应。 stringnumber 可以写auto或者 900 的数字
height: "auto", //组件的高度。默认自适应。 stringnumber 可以写auto或者 900 的数字
containLabel: true, //区域是否包含坐标轴的刻度标签。
backgroundColor: "rgb(128, 128, 128)", //网格背景色，默认透明。 注意：此配置项生效的前提是，设置了 show: true。
},
4、xAxis 图表的 x 轴
xAxis: {
position: "right", //x 轴的坐标位置。 可选：'top' 'bottom'
type: "log", // 'value' 数值轴，适用于连续数据 'category' 类目轴，适用于离散的类目数据。 'time' 时间轴，适用于连续的时序数据， 'log' 对数轴。适用于对数数据。
name: "我是x轴的name", //坐标轴名称。
nameLocation: "start", //坐标轴名称显示位置。 可选：'start' ' 、 middle' 或者 'center' 、'end'
nameTextStyle: { // x坐标轴名称的文字样式。
color: "pink", //坐标轴名称的颜色
fontWeight: "normal",//坐标轴名称文字字体的粗细。
fontSize: 12, //number 坐标轴名称文字的字体大小。
},
nameGap: 50, //number 坐标轴名称与轴线之间的距离。
nameRotate: 90, //number 坐标轴名字旋转，角度值。
min: "30%", //number string Function 坐标轴刻度最小值。 不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
max: "100%", //number string Function 坐标轴刻度最大值。 不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
axisLine: { //坐标轴轴线相关设置。
onZero: true, //boolean X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
},
boundaryGap: [0, 0.01], //boolean Array 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
},
5、yAxis 图表的 y 轴
yAxis: {
position: "bottom", //y轴的坐标位置。 可选：'left' 'right'
type: "category", // 'value' 数值轴，适用于连续数据 'category' 类目轴，适用于离散的类目数据。 'time' 时间轴，适用于连续的时序数据， 'log' 对数轴。适用于对数数据。
data: ["巴西", "印尼", "美国", "印度", "中国", "世界人口(万)"],
},
6、tooltip 提示框
tooltip: {
trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 /'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms 类型 number
hideDelay: 100, // 浮层隐藏的延迟，单位ms 类型 number
transitionDuration : 0.4, // 提示框浮层的移动动画过渡时间 类型 number
backgroundColor: 'rgba(0,0,0,0.2)', // 提示背景颜色，默认为透明度为0.7的黑色
borderColor: '#333', // 提示框浮层的边框颜色。
borderRadius: 40, // 提示边框圆角，单位px，默认为4
borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle : { // 直线指示器样式设置
color: '#48b',
width: 2,
type: 'solid' // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器
},
shadowStyle : { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
},
textStyle: { //提示框浮层的文本样式
color: '#fff'
}
},
7、vertical 区域缩放
dataZoom: {
orient: 'horizontal', // 布局方式是横还是竖。，默认为水平布局，可选为：'horizontal' 水平 / 'vertical' 竖直
backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
},
8、series里的type:“bar” 柱形图部分参数
series: [
{
name: "2011年", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type: "bar", //柱状图
legendHoverLink: true, //是否启用图例 hover 时的联动高亮。 可选 boolean
data: [18203, 23489, 29034, 104970, 131744, 630230], //Array 系列中的数据内容数组。数组项通常为具体的数据项。
itemStyle: { //图形样式。
color: "", //柱条的颜色。 默认从全局调色盘 option.color 获取颜色
borderColor: "blue", //柱条的描边颜色。
},
showBackground: true, //是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
backgroundStyle: { //每一个柱条的背景样式。需要将 showBackground 设置为 true 时才有效。
color: "rgba(180, 10, 180, 0.2)", //柱条的背景颜色。
},
cursor: "pointer", //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
barWidth: "", //柱条的宽度，不设时自适应。 number string 可以是绝对值例如 40 或者百分数例如 '60%'。
barGap: "30%", //string 不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。 如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。
},
{
name: "2012年",
type: "bar",
data: [19325, 23438, 31000, 121594, 134141, 681807],
},
{
name: "2020年",
type: "bar",
data: [19325, 23438, 31000, 121594, 134141, 681020],
},
],
9、series里的type:“bar” 折线/面积图部分参数
series: [
{
name: "2012年", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type: "line", //line 折线图
smooth:true, //是否平滑曲线显示。 boolean number 如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5。
data: [19325, 23438, 31000, 121594, 134141, 681807],
},
],
9、series里的type:"pie 饼图
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
series: [
{
name: "整体分类",
type: "pie",
radius: [0, "30%"], // 饼图的半径。 类型number：直接指定外半径值。
// string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
// Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。可以将内半径设大显示成圆环图（Donut chart）。
label: {
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
position: "inner", // 标签的位置。
// 可选：'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。
// 'inside' 饼图扇区内部。 'inner' 同 'inside'。
// 'center'在饼图中心位置。见圆环图示例
},
itemStyle: { //图形样式。
normal: {
borderColor: "pink", //图形边框颜色
borderWidth: 2, //图开边框宽度
},
},
selectedMode: 'single', //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选。
data: [
{
value: 875,
name: "传输",
},
{
value: 1239,
name: "话务",
},
],
},
],
};
扫一扫
1481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
