文章来源：https://www.toymoban.com/news/detail-806166.html
echarts自定义x轴和tooltip数据格式
x轴和y轴数据格式如下
x: [0, 1, 2, 3, 4, 5, 6, ....., 23],
y: [2.5, 3.1, 3.2, 2.2, 2.3, 3.1, 3.1, null, null, null, .... ,null]
// 接口返回0-23点的数据，每一个小时一个间隔，没有的话则为null
文章来源地址https://www.toymoban.com/news/detail-806166.html
修改后xy轴数据格式如下
// 每五分钟一个数据
[
{
"timeValue": "2024-01-18 00:00:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 00:05:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 00:10:11",
"areaNorm": 1.4
},
{
"timeValue": "2024-01-18 00:15:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 00:20:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 00:25:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 00:30:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 00:35:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 00:40:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 00:45:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 00:50:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 00:55:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 01:00:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 01:05:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 01:10:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 01:15:11",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 01:20:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 01:25:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 01:30:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 01:35:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 01:40:11",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 01:45:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 01:50:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 01:55:13",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 02:00:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:05:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:10:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:15:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:20:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:25:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:30:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:35:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:40:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:45:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:50:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 02:55:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 03:00:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 03:05:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 03:10:12",
"areaNorm": 0.2
},
{
"timeValue": "2024-01-18 03:15:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 03:20:13",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 03:25:11",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 03:30:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 03:35:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 03:40:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 03:45:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 03:50:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 03:55:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 04:00:12",
"areaNorm": 0.87
},
{
"timeValue": "2024-01-18 04:05:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 04:10:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 04:15:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 04:20:12",
"areaNorm": 0.87
},
{
"timeValue": "2024-01-18 04:25:12",
"areaNorm": 0.87
},
{
"timeValue": "2024-01-18 04:30:12",
"areaNorm": 1.4
},
{
"timeValue": "2024-01-18 04:35:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 04:40:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 04:45:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 04:50:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 04:55:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 05:00:13",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 05:05:13",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 05:10:12",
"areaNorm": 0.27
},
{
"timeValue": "2024-01-18 05:15:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 05:20:12",
"areaNorm": 1.0
},
{
"timeValue": "2024-01-18 05:25:12",
"areaNorm": 1.0
}
]
需求：
将json数据转成折线图需要的数据格式，并且x轴始终为0 - 23 点，并且折线图上的点数不会缺失，对应时间有点位的就展示，没有就空
getChartsData(areaType, areaCode) {
return new Promise((resolve, reject) => {
// areaType：1 道路 2 区域
selectDayAreaNorm({ areaType, areaCode }).then((res) => {
if (res.code === 1) {
this.chartsData = {
// 初始化数据（五分钟一个点，24 * 12）
roadNorm: Array.from({ length: 24 * 12 }, () => null), // Initialize with [null, null, ..., null]
time: Array.from({ length: 24 * 12 }, (_, i) => i / 12), // Initialize with [0, 0.0833, ..., 23.9167]
};
if (res.data && res.data.length > 0) {
res.data.forEach((item) => {
const timeValue = new Date(item.timeValue);
const index = Math.floor(
timeValue.getHours() * 12 + timeValue.getMinutes() / 5
);
if (index >= 0 && index < this.chartsData.time.length) {
this.chartsData.roadNorm[index] = item.areaNorm;
}
});
}
resolve();
} else {
reject();
}
});
})
.then(() => {
if (this.chartsData) {
this.initChartsBox();
}
})
.catch((e) => {
console.warn("Error", e);
});
},
initChartsBox() {
this.option = {
tooltip: {
trigger: "axis",
axisPointer: {
animation: false,
},
formatter: function (params) {
const index = params[0].dataIndex;
const hour = Math.floor(index / 12);
const minute = (index % 12) * 5;
const formattedHour = String(hour).padStart(2, "0");
const formattedMinute = String(minute).padStart(2, "0");
const timeStr = `${formattedHour}:${formattedMinute}`;
const congestionIndex = params[0].value;
const formattedIndex = congestionIndex?.toFixed(2) || "-";
const circleIcon =
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:8px;height:8px;background-color:#5470c6;"></span>';
return `${timeStr}<br>${circleIcon}拥堵指数: ${formattedIndex}`;
},
},
axisPointer: {
link: {
xAxisIndex: "all",
},
},
dataZoom: [
{
show: false,
realtime: true,
start: 0,
end: 100,
// height: 14,
xAxisIndex: [0, 1],
zoomLock: true,
},
{
type: "inside",
realtime: true,
start: 0,
end: 100,
xAxisIndex: [0, 1],
zoomLock: true,
},
],
grid: [
{
top: 6,
bottom: 40,
left: 40,
right: 40,
},
{
left: 40,
right: 40,
},
],
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
onZero: true,
},
data: this.chartsData.time,
axisLabel: {
formatter: function (value, index) {
const hour = Math.floor(value);
return hour + ":00";
},
},
},
{
gridIndex: 1,
},
],
yAxis: [
{
type: "value",
min: 0,
max: 10,
// name: '时间:',
},
{
gridIndex: 1,
},
],
series: [
{
name: "拥堵指数",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 9,
showSymbol: false,
lineStyle: {
normal: {
width: 2,
color: "#5470c6",
},
},
markPoint: {
data: [
{
type: "max",
name: "最大值",
},
{
type: "min",
name: "最小值",
},
],
},
markArea: {
silent: true,
label: {
normal: {
position: ["4%", "50%"],
},
},
data: [
[
{
// name: '畅通',
yAxis: 0,
itemStyle: {
color: "rgb(0, 128, 0)",
},
},
{
yAxis: 2,
},
],
[
{
// name: '基本畅通',
yAxis: 2,
itemStyle: {
color: "rgb(153, 204, 0)",
},
},
{
yAxis: 4,
},
],
[
{
// name: '轻度拥堵',
yAxis: 4,
itemStyle: {
color: "rgb(255, 255, 0)",
},
},
{
yAxis: 6,
},
],
[
{
// name: '中度拥堵',
yAxis: 6,
itemStyle: {
color: "rgb(255, 153, 0)",
},
},
{
yAxis: 8,
},
],
[
{
// name: '严重拥堵',
yAxis: 8,
itemStyle: {
color: "rgb(255, 0, 0)",
},
},
{
yAxis: 10,
},
],
],
},
// data: this.chartsData.roadNorm,
data: this.chartsData.roadNorm.map((value, index) => ({
value,
time: this.chartsData.time[index],
})), // 数据初始化(tooltip中使用formatter)
},
],
};
this.myChart = this.$echarts.init(document.getElementById("chartsBox")); // 图标初始化
this.myChart.setOption(this.option); // 渲染页面
/* ECharts动态效果 */
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
mounted() {
this.getChartsData(
this.$store.state.monitorLeftComp.areaType,
this.$store.state.monitorLeftComp.areaCode
);
}
到了这里，关于echarts自定义x轴和tooltip数据格式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
