option = {
title: {
show: false,
x: "center",
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
legend: {
formatter:(name)=> {
// 在这里自定义 legend 的显示文本
// statModels是后端返回的对象,对应每个参数的总数据
if (this.Data.statModels) {
let flag=this.Data.statModels?.find(item => name===item.name)
if(flag) return `${name}:${flag.data}`
} else return name;
},
// 这里的 data 可以是你实际 series 的 name
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
right: "auto",
textStyle: { //图例文字的样式
fontSize: 16
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
axisTick: {
alignWithLabel: true,
show: true,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#E9ECF2",
},
},
axisLabel: {
show: true,
color: "#666",
},
},
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
color: "#4B5563",
fontSize: 12,
fontWeight: 400,
backgroundColor: "#FFFFFF",
},
splitArea: {
areaStyle: {
color: ["rgba(250,250,250,0.3)", "rgba(250,250,250,0.3)"],
},
},
},
],
series: [],
};
需求是根据选择的参数做对比,动态生成echarts图,但是需要在legend中显示总数据,所以会出现legend文本与series的name不对应,需要自定义legend