echarts的option配置知识点归纳整理（还在更新）：
通用：
1、grid: {
left: "0", //距离容器左边的距离
right: "0", //距离容器右边的距离
bottom: "0", //距离容器下边的距离
top: "33", //距离容器上边的距离
containLabel: true //是否显示坐标轴
},
2、xAxis: [{
type: 'category', // 坐标轴类型
// prettier-ignore
axisLabel: { // 设置X轴坐标轴名称字体样式
textStyle: {
fontSize: "10",
fontWeight: '400',
color: '#999999',
fontFamily: 'PingFangSC-Regular, PingFang SC'
},
},
axisTick: {
show: false // 是否显示X轴坐标轴刻度
},
axisLine: {
show: false // 是否显示X轴坐标轴线
},
data: ['07/08', '07/09', '07/10', '今天'] // X轴字段数据
}],
3、yAxis: [{
type: 'value', // 坐标轴类型
axisLabel: { // 设置Y轴坐标轴名称字体样式
textStyle: {
fontSize: "10",
fontWeight: '400',
color: '#999999',
fontFamily: 'PingFangSC-Regular, PingFang SC'
},
},
name: '元', // 设置Y轴坐标轴单位
nameTextStyle: { // 单位样式
color: "#999999", // 字体颜色
fontSize: 10, // 字体大小
padding: [0, 26, 0, 0], // 内填充
fontFamily: 'PingFangSC-Regular, PingFang SC', // 字体
fontWeight: 400,
}
}],
4、tooltip: { // 提示框组件
show: true,
confine: false, //是否将 tooltip 框限制在图表的区域内
backgroundColor: 'rgba(0,0,0,0.65)', //提示框浮层背景色
trigger: 'axis',
dashOffset: 10,
padding: 6, //上右下左内边距
textStyle: { //提示框浮层的文本样式
color: '#fff',
fontSize: 10,
lineHeight: 10,
},
axisPointer: { //坐标轴指示器配置项
type: 'line', //直线指示器
z: 1,
lineStyle: {
type: 'dashed',
color: '#979797',
shadowOffsetY: -7,
shadowColor: '#979797',
}
},
// 格式化提示框组件文字内容
formatter: function (params) {
// 访问自定义属性
let sprintPersons = params.data?.sprintPersons?.join("<br/>");
// params是包含当前项信息的对象
let value = params.value; // 数据值
let name = params.name; // 数据名
return `${name}<br/>${value}人<br/>${sprintPersons}`;
},
},
5、 legend: { // 图例组件
width: "50%", // 设置宽度
type: "scroll", // 超出宽度翻页
orient: 'horizontal', // 布局朝向（横向/（纵向：vertical））
right: 0, // legend位置调整
icon: "circle", // legend标记样式
itemHeight: 8, // legend标记样式高度
itemWidth: 8, // legend标记样式宽度
itemGap: 12, // legend标记的间距
textStyle: { // 图例文本样式
fontSize: 10,
fontFamily: 'PingFangSC-Regular, PingFang SC',
fontWeight: 400,
color: '#666666',
padding: [0, 0, 0, 6] //文字与图形之间的左右间距
},
data: ['收入', '支出'] //图例数据数组
},
柱形图：
1、series: [{ // 双柱图数据
name: '收入',
type: 'bar',
barWidth: '10', // 柱状图宽度
barGap: '60%', // 多柱形柱形间隔
label: {
// 设置显示label
show: true,
// 设置label的位置
position: 'top',
// 设置label的文字颜色
color: '#999999',
fontFamily: 'PingFangSC-Regular, PingFang SC',
fontWeight: 500,
fontSize: '10',
// 格式化label文字
formatter: function (data) {
return Math.round(data.value).toFixed(2)
},
},
data: [
25.6, 76.7, 135.6, 162.2,
],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 设置柱状图渐变色
offset: 0,
color: "#FF991C" // 0% 处的颜色
}, {
offset: 0.6,
color: "#ffb720" // 60% 处的颜色
}, {
offset: 1,
color: "#FFCD24 " // 100% 处的颜色
}], false),
barBorderRadius: [3, 3, 0, 0], // 柱形图圆角
},
},
{
name: '支出',
type: 'bar',
barWidth: '10', // 柱状图宽度
label: {
// 设置显示label
show: true,
// 设置label的位置
position: 'top',
// 设置label的文字颜色
color: '#999999',
fontFamily: 'PingFangSC-Regular, PingFang SC',
fontWeight: 500,
fontSize: '10',
// 格式化label文字
formatter: function (data) {
return Math.round(data.value).toFixed(2)
},
},
data: [
70.7, 175.6, 182.2, 48.7
],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 设置柱状图渐变色
offset: 0,
color: "#4186F5" // 0% 处的颜色
}, {
offset: 0.6,
color: "#73affa" // 60% 处的颜色
}, {
offset: 1,
color: "#9CD2FF " // 100% 处的颜色
}], false),
barBorderRadius: [3, 3, 0, 0], // 柱形图圆角
},
}
]
折线图：
1、 series: [{ // 折线图数据
name: '完成订单',
type: 'line',
stack: 'Total',
symbol: 'circle', // 折线图折点样式(实心)
symbolSize: 4, // 折线图折点的大小样式
lineStyle: {
color: 'pink' // 设置折线颜色
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '取消订单',
type: 'line',
symbol: 'circle', // 折线图折点样式(实心)
symbolSize: 4, // 折线图折点的大小样式
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
]
};
环形图：
legend: {//控制图例位置
orient: 'vertical',//图例**纵向排列**（从上到下）`'horizontal'`：图例**横向排列**（从左到右）
left: 'right',
top: 'center',
icon: 'circle',//图里图标为圆点
textStyle: {
fontSize: 10,
color: '#333'
},
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
title: {//控制标题位置
text: '环形图标题',
left: 'center',
top: 'top',
textStyle: {
fontSize: 16,
fontWeight: 'bold'
}
},
series: [
{
// name: "Access From",
type: "pie",
radius: ["40%", "70%"], // 环形图内外半径设置 ;增大内径 会使环更细；减小外径; 会整体缩小环形图；同时减小内外径的值，整个环形图会变小。
center: ["25%", "50%"], // 环形图位置
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
// fontSize: 40, // 不设置则自适应(建议不设置)
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
// data: [
// { value: 1048, name: "Search Engine" },
// { value: 735, name: "Direct" },
// { value: 580, name: "Email" },
// { value: 484, name: "Union Ads" },
// { value: 300, name: "Video Ads" },
// ],
data: sprintDistributionArr,
},
],
漏斗图：
1、series: [
{
name: "Funnel",
type: "funnel",
// 漏斗图大小及位置
width: "45%",
height: "60%",
left: "30%",
top: "25%",
label: {
position: "left",
show: true,
// formatter: "{b}: {c} ({d}%)",
color: "#969696",
fontSize: 14,
},
data: [
{ value: 60, name: "Visit" },
{ value: 30, name: "Inquiry" },
{ value: 100, name: "Show" },
{ value: 190, name: "全部用户" },
],
labelLine: {
show: true,
smooth: false,
length: 150,
length2: 0,
lineStyle: {
color: "#EFF2F9",
width: 1,
},
},
},
],
BUG：
1、在使用 ECharts 绘制图表时，如果窗口大小（或图表容器大小）变化过快，可能会导致图表渲染不及时，从而出现图表超出其容器边界的问题。这种情况通常发生在响应式布局或窗口大小频繁调整的场景中。
实际问题：当窗口大小变化过快时，echarts图表超出容器【从最小窗口直接最大化时】 解决：此问题使用延迟变化resize
let resizeTimer: any;
window.addEventListener("resize", () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
myChart.resize();
}, 200); // 延迟200毫秒
});
