initChart(data) {
this.chart = this.$echarts.init(this.$el, "macarons");
const {
keyListOne,
keyListTwo,
colorList,
searchForm,
formOne,
formTwo,
} = this;
console.log("🚀 ~ initChart ~ searchForm:", searchForm, formOne, formTwo);

console.log("🚀 ~ initChart ~ rightHotel:", rightHotel, leftHotel);
data = {
priceOne: [
{
label: "单间",
value: [538.79, 596.57, 616.41, 361.05, 246.75, 246.75],
},
{
label: "套房",
value: [837.67, 945.7, 947.76, 657.15, 613.04, 246.75],
},
{
label: "标间",
value: [776.35, 844.67, 832.06, 437.1, 294.9, 246.75],
},
],
timeOne: [
"04月30日",
"05月01日",
"05月02日",
"05月03日",
"05月04日",
"05月05日",
],
priceTwo: [
{
label: "单间",
value: [590.78, 632.23, 589.12, 463.77, 338.43, 280.41],
},
{
label: "套房",
value: [1522.2, 1605.49, 1527.67, 1266.56, 982.07, 807.58],
},
{
label: "标间",
value: [648.65, 708.25, 647.63, 494.6, 368.77, 302.86],
},
],
timeTwo: [
"05月01日",
"05月02日",
"05月03日",
"05月04日",
"05月05日",
"05月06日",
"05月07日",
"05月08日",
],
};
// 根据查询条件 key取出左右两边查询数据
let timeData = data[keyListOne["timeData"]] || [];

let priceData = data[keyListOne["priceData"]] || [];
priceData = JSON.parse(JSON.stringify(priceData));

let timeDataTwo = data[keyListTwo["timeData"]] || [];

let priceDataTwo = data[keyListTwo["priceData"]] || [];
priceDataTwo = JSON.parse(JSON.stringify(priceDataTwo));

// 找到左右查询调整酒店类型 格式化
let leftHotel = this.formatter(formOne.hotelTypeOne);
let rightHotel = this.formatter(formTwo.hotelTypeTwo);
console.log("🚀 ~ initChart ~ rightHotel:", rightHotel, leftHotel);

// 格式化左右label 合并酒店到label中
priceData = priceData.map((item, index) => {
item.label = leftHotel + "|" + item.label;
return item;
});
priceDataTwo = priceDataTwo.map((item, index) => {
item.label = rightHotel + "|" + item.label;
return item;
});

// 获取时间 如果是同一年合并同时期的数据 不是同一年直接展开合并

timeData = this.mergeAndSortDates(timeData, timeDataTwo);
priceData = [...priceData, ...priceDataTwo];
console.log("🚀 ~ initChart ~ priceData:", priceData);

const series = priceData.map((item, index) => {
return {
name: "住宿费|" + item.label,
yAxisIndex: 0,
type: "line",
smooth: false,
data: item.value,
symbol: "rect",
symbolSize: 5,
lineStyle: {
color: colorList[index],
},
itemStyle: {
color: colorList[index],
borderType: "solid", // 设置边框类型
borderWidth: 1, // 设置边框宽度
borderRadius: 0, // 设置圆角大小，设为 0 使其完全方形
},
emphasis: {
itemStyle: {
borderWidth: 2,
borderColor: "#fff",
},
label: {
show: true,
position: "top",
color: colorList[index],
formatter: ({ value }) => {
return value + "元";
},
align: "left",
offset: [10, 5],
},
},
};
});

const title = timeData.length
? ${[timeData[0]]}至${ timeData[timeData.length - 1] }平潭酒店住宿应急监测平均价格走势图
: "";

this.chart.setOption({
grid: {
top: 80,
right: 40,
bottom: 40,
left: 40,
containLabel: true,
},
title: {
text: title || "",
left: "center",
textStyle: {
fontSize: 16,
},
},
legend: {
symbolSize: [5, 5], // 控制图例标记的大小，[宽度, 高度]
itemWidth: 8, // 图例宽度
itemHeight: 8, // 图例高度
itemGap: 20,
top: 30,
textStyle: {
color: "rgba(0, 0, 0, 0.85)",
},
},
xAxis: {
data: timeData,
axisLabel: {
color: "rgba(0, 0, 0, 0.45)",
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "rgba(0, 0, 0, 0.15)",
width: 0,
},
},
},
yAxis: [
// {
// type: "value",
// name: "(元)",
// nameTextStyle: {
// padding: [0, 0, 0, -25],
// },
// alignTicks: true,
// smooth: true,
// splitLine: {
// show: false,
// },
// axisLabel: {
// color: "rgba(0, 0, 0, 0.45)",
// },
// },
{
type: "value",
name: "(元)",
nameTextStyle: {
padding: [0, 0, 0, 30],
},
axisLabel: {
color: "rgba(0, 0, 0, 0.45)",
// formatter: (value) => {
// return value
// }
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
lineStyle: {
color: "rgba(0, 0, 0,0.05)",
},
},
},
],
series,
});
}, 这是我现在的echarts 图表代码 我现在将日期排序去重合并后出现了问题合并之后4月30号是开头 但是 priceTwo 里面的数据的第一条数据不是4-30号的 是5-1号的 怎么解决这种情况 我希望能正确显示数据4.30号的显示为空或者0