目录
一、须知
配置项官方文档：点此进入。
我总结了比较常用的功能，写进注释里面，附带链接分享和效果图展示。（更新中....）
二、Title
option = {
title: {
text: 'Weekly Sales',//标题文本
textStyle: {
color: '#333', // 标题文本颜色
fontWeight: 'bold', // 标题文本字体粗细，可选'normal','bold','bolder','lighter'
fontSize: 18, // 标题文本字体大小
},
subtext: 'Unit: Pieces', // 副标题文本内容
subtextStyle: {
color: '#aaa', // 副标题文本颜色
fontStyle: 'normal', // 副标题文本字体风格
fontWeight: 'normal', // 副标题文本字体粗细
fontSize: 14 // 副标题文本字体大小
},
textAlign: 'auto', // 标题文本水平对齐方式，可选值：'auto'、'left'、'right'、'center'
padding: [10, 10, 10, 10], // 标题的内边距，上右下左
itemGap: 10, // 主副标题之间的间距
left: 'center', // 标题组件离容器左侧的距离，可选'left', 'center', 'right'，20，'20%'
top:'top' // 标题组件离容器顶部的距离，可选'top', 'middle', 'bottom'，20，'20%'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
【分享链接：点此进入】
【实现效果】
【备注】padding://上、右、下、左 上指：本元素距离上个元素多远，左右指：左右是调整位置的（距离左/右多远），下指：下面的元素距离本元素多远
三、 Legend
option = {
title: {
text: 'Referer of a Website',
left: 'center'
},
tooltip: {
trigger: 'item', // 提示框触发类型为数据项触发
formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示框内容格式器:显示series的name、data的name、data的value和百分比
},
legend: {
orient: 'vertical', // 图例布局方式为垂直，可选'horizontal','vertical'
left: 'left', // 图例组件离容器左侧的距离，可选'left', 'center', 'right'
itemHeight: 14, // 图例的高
itemWidth: 14, // 图例的宽
itemGap: 20, // 图例之间的间隔
padding: [40, 20, 10, 5], // 上、右、下、左的内边距（移动位置）
textStyle: {
color: '#333', // 图例文字颜色
fontSize: 12 // 图例文字大小
},
data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads'] // 图例数据，与series中的name对应
},
series: [
{
name: 'Access From',
type: 'pie', // 图表类型为饼图
radius: '50%', // 饼图半径，可设置为相对的百分比或绝对的像素值
center: ['50%', '60%'], // 饼图的中心（圆心）坐标，支持绝对像素和相对百分比
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
label: {
show: true, // 是否显示标签
formatter: '{b} : {c} ({d}%)', // 显示data的name、data的value和百分比
fontSize: 12 // 标签文字大小
},
labelLine: {
show: true // 是否显示标签的视觉引导线
},
emphasis: {//鼠标悬浮阴影
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale', // 数据更新动画的类型
animationEasing: 'elasticOut', // 数据更新动画的缓动效果
animationDelay: function (idx) { // 数据更新动画的延迟
return idx * 50;
}
}
]
};
【分享链接】
【实现效果】
四、Grid
option = {
grid: {
show: true,
left: '10%', // 网格左边距
top: 60, // 网格顶边距
borderWidth: 1 // 网格边框宽度
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
tooltip: {
show: true, // 显示提示框
trigger: 'axis', // 触发类型，鼠标悬停显示提示框
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 指示器类型为直线
}
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
};
【实现链接】
五、yAxis
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value', // 设置 Y 轴类型为数值轴
offset: 10, // Y 轴距离图形的长度
name: 'Sales', // Y 轴名称
nameLocation: 'center', // Y 轴名称的位置，可以是 'start', 'center', 'end'
nameTextStyle: { // Y 轴名称的样式
color: '#333',
fontSize: 14
},
nameGap: 40, // Y 轴名称与轴线之间的距离
nameRotate: 0, // Y 轴名称的旋转角度
interval: 50, // 强制设置坐标轴分割间隔
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
【链接】
【效果】
六、Tooltip
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item', // 设置触发类型为 item，即鼠标悬浮在图形元素上时触发，饼图、散点图选'item'，柱形图、折线图选'axis'
// 提示框内容格式化字符串，{b} 代表数据项名称，{c} 代表数值，{d} 代表百分比
formatter: '{a}<br>{b}: {c} ({d}%})' //若不设置则显示默认值
},
legend: {
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '40%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' }
]
}
]
};
【链接】
【效果】
七、axisPointer
option = {
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33]
],
type: 'scatter'
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross' // 设置axisPointer的类型为十字准星，可选：'line' 直线指示器,'shadow' 阴影指示器,'cross' 十字准星指示器。
}
},
axisPointer: {
label: {
precision: 2, // 标签显示的小数精度
textStyle: {
color: '#FFF', // 标签文字颜色
fontSize: 12, // 标签文字大小
}
},
lineStyle: {
color: '#555', // axisPointer线的颜色
width: 1, // axisPointer线的宽度
type: 'dashed' // axisPointer线的类型，可选'solid','dashed','dotted'
}
}
};
【链接】
【效果】
八、toolbox
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
],
toolbox: {
feature: {
saveAsImage: {}, // 添加保存为图片按钮
restore: {}, // 添加重置按钮，用于还原初始状态
dataZoom: {}, // 添加数据区域缩放按钮
dataView: {}, // 添加数据视图按钮，可以查看数据详细信息
magicType: { // 添加切换图表类型按钮
type: ['line', 'bar'] // 可切换的图表类型，这里包括折线图和柱状图
}
}
}
};
【链接】
【效果】
九、rich（以title和label为例）
let bgColor = "#fff";
let color = ["#0E7CE2", "#FF8352", "#E271DE", "#F8456B", "#00FFFF", "#4AEAB0"];
let echartData = [
{
name: "A类",
value: "20",
},
{
name: "B类",
value: "80",
}
];
let total = 200
option = {
backgroundColor: bgColor,
color: color,
title: [
{
text: `{s1|共}\n{val|${total}}\n{s1|个}`,
top: "center",
left: "center",
textStyle: {
rich: {
s1: {
fontSize: 15,
fontWeight: "normal",
color: "#666666",
padding: [10, 0],
},
val: {
fontSize: 32,
fontWeight: "bold",
color: "#333333",
},
},
},
},
{
text: "类型统计",
left: 'center'
},
],
series: [
{
type: "pie",
radius: ["45%", "60%"],
center: ["50%", "50%"],
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: bgColor,
borderWidth: 2,
},
},
label: {
normal: {
formatter: (params) => {
return (
`{icon|●}{name|${params.name}}{value|${params.value}%}`
);
},
rich: {
icon: {
fontSize: 16,
},
name: {
fontSize: 14,
padding: [0, 10, 0, 4],
color: "#666666",
},
value: {
fontSize: 18,
fontWeight: "bold",
color: "#333333",
},
},
},
},
},
],
};【链接】
【效果】
【说明】：可以调节s1 val的样式，使得文本内容获得改变
`{s1|共}\n{val|${total}}\n{s1|个}`样式指定：
textStyle: {
rich: {
s1: {
fontSize: 15,
fontWeight: "normal",
color: "#666666",
padding: [10, 0],
},
val: {
fontSize: 32,
fontWeight: "bold",
color: "#333333",
},
}
3280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
