献上动态效果图 这个网上视频转换gif质量不太好 将就看

下载.gif

这是模拟动态时间 等时间距 实际项目中一样的

线上 实际图形

4.png

你可以修改 时间、text文本颜色、字体大小等样式；事件点样式可以是其他你喜欢的图形 不限于圆形哦

献上 静态图形代码 绘制了2版【静态数据、动态数据】

5.png

鼠标hover事件.png

用到 d3.js绘制 vue3 鼠标覆盖可看到具体某个时间点多条信息

代码

<template>
<h1>时间事件轴</h1>

<div id="time"></div>

<div id="tip-table">
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="time" label="time" width="200" />
    <el-table-column prop="equip" label="equip" />
    <el-table-column prop="type" label="类型" />
  </el-table>
</div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import {
create,
select,
scaleLinear,
selectAll,
csv,
extent,
axisBottom,
axisLeft,
map,
scaleTime,
timeFormat,
timeHour,
} from 'd3'

let width = 1200,
height = 200,
marginLeft = 200,
marginTop = 100

const tableData = ref([
{
  time: '2024-09-01 08:20:20',
  type: 0,
  equip: '开始',
},
])

const svg = create('svg')
.attr('width', width)
.attr('height', height)
.attr('viewbox', [0, 0, width, height])

const g = svg
.append('g')
.attr('transform', `translate(${marginLeft},${marginTop})`)

//x轴时间比例尺
const xScale = scaleTime()
.domain([new Date('2024-09-01 08:20:20'), new Date('2024-09-01 10:20:10')])
.range([0, width - 260])

const x = axisBottom(xScale)
.tickFormat(timeFormat('%m-%d-%Y %H:%M:%S'))
.tickSizeOuter(0)

const xAxis = g.append('g').call(x).attr('class', 'x-axis')

g.select('.x-axis').selectAll('.tick').remove()
g.select('.domain').attr('style', 'color:black')

let eventData = [
{
  time: '2024-09-01 08:20:20',
  type: 0,
  equip: '开始',
},
{
  time: '2024-09-01 10:20:10',
  type: 0,
  equip: '结束',
},

{
  time: '2024-09-01 08:20:22',
  type: 1,
  equip: '111111',
  list: [
    {
      time: '2024-09-01 08:20:22',
      type: 1,
      equip: '1111',
    },
    {
      time: '2024-09-01 08:20:22',
      type: 3,
      equip: '1111',
    },
  ],
},
{ time: '2024-09-01 08:21:00', type: 2, equip: 'REC-99', list: [] },
{
  time: '2024-09-01 08:40:20',
  type: 2,
  equip: '1111',
},
{
  time: '2024-09-01 09:10:00',
  type: 1,
  equip: '111',
  list: [
    {
      time: '2024-09-01 09:10:00',
      type: 1,
      equip: '1111',
    },
    {
      time: '2024-09-01 09:10:00',
      type: 2,
      equip: '111',
    },
  ],
},
]

const circle = g.selectAll('.circle').data(eventData)

circle
.enter()
.append('circle')
.attr('class', 'circle')
.attr('cx', (d) => xScale(new Date(d.time))) // 圆的中心x坐标
.attr('cy', 0) // 圆的中心y坐标
.attr('r', 5) // 圆的半径
.attr('fill', (d) => {
  return d.type == 1
    ? 'green'
    : d.type === 2
    ? 'red'
    : d.type === 3
    ? 'yellow'
    : 'black'
}) // 圆的填充颜色
.on('mouseover', function (event) {
  select(this).style('cursor', 'pointer')
  // console.log(select(this).data()[0])
  tableData.value = select(this).data()[0].list
  let myDiv = document.getElementById('tip-table')
  myDiv.style.display = 'block'
  var x = event.clientX
  var y = event.clientY

  // 设置div位置
  myDiv.style.left = x + 25 + 'px' // 设置为鼠标点击位置的偏移量
  myDiv.style.top = y + 35 + 'px' // 设置为鼠标点击位置的偏移量
})
// .on('click', function (event) {

// })
.on('mouseleave', function () {
  let myDiv = document.getElementById('tip-table')
  myDiv.style.display = 'none'
})

circle
.enter()
.append('text')
.attr('x', (d) => xScale(new Date(d.time)))
.attr('y', 0 + 30)
.attr('class', 'text')
.text((d) =>
  d.type == 1
    ? d.equip + '-事件'
    : d.type === 2
    ? d.equip + '-事件'
    : d.type === 3
    ? d.equip + '-事件'
    : d.equip
)
.attr('font-size', '14px')
.attr('fill', (d) => {
  return d.type == 1
    ? 'green'
    : d.type === 2
    ? 'red'
    : d.type === 3
    ? 'yellow'
    : 'black'
})
.attr('text-anchor', 'middle')

circle
.enter()
.append('text')
.attr('x', (d) => xScale(new Date(d.time)))
.attr('y', 0 - 30)
.attr('class', 'text')
.text((d) => d.time)
.attr('font-size', '14px')
.attr('fill', (d) => {
  return d.type == 1
    ? 'green'
    : d.type === 2
    ? 'red'
    : d.type === 3
    ? 'yellow'
    : 'black'
})
.attr('text-anchor', 'middle')
// 为元素添加鼠标悬停时的样式
// circle.on('mouseover', function () {
//   d3.select(this).style('cursor', 'pointer')
// })

onMounted(() => {
document.getElementById('time').appendChild(svg.node())
})
</script>

<style scoped>
circle {
cursor: pointer;
}

#tip-table {
width: 400px;
/* height: 300px; */
display: none;
position: absolute;
border-radius: 5%;
border: 1px solid seashell;
background-color: rgb(193, 204, 204);
padding: 15px;
max-height: 280px;
}
</style>