【前端基础】CSS样式+Vue中绘制时间轴

深度选择器

在 Vue.js 中，/deep/、>>>、:deep 和 ::v-deep 这些都是深度选择器，用于修改子组件的样式。它们主要用于解决作用域样式和组件样式之间的冲突问题。

1. /deep/ 或 >>>

/deep/ 和 >>> 是相同的选择器，用于向下穿透组件的边界，使得在子组件中能够修改其内部元素的样式。它们可以用于在父组件中修改子组件的样式，但是这种选择器在最新版本的 Vue.js 中已经被废弃，不推荐使用。
.parent /deep/ .child {/* 修改子组件的样式 */
}----------------------------.parent >>> .child {/* 修改子组件的样式 */
}

2. :deep 和 ::v-deep

:deep 和 ::v-deep 是 Vue.js 2.6.0 版本引入的新选择器，用于取代已经废弃的 /deep/ 和 >>>。它们具有相同的功能，都用于穿透子组件的边界，修改子组件内部元素的样式。
.parent ::v-deep .child {/* 修改子组件的样式 */
}----------------------.parent :deep .child {/* 修改子组件的样式 */
}

注意事项：

深度选择器会影响性能，因为它会穿透组件的边界并应用样式，导致样式选择范围更大，可能会增加页面的渲染时间。
尽量避免过度使用深度选择器，应该优先考虑使用作用域样式或者通过传递 props 来控制组件的样式。

Vue中绘制时间线

Documentation - Apache ECharts

Examples - Apache ECharts(渐段)

【他山之石】基于Echarts表格的时间线(轴)组件触发时间变化事件,带多种方案比较_echart 事件时间线-CSDN博客

Examples - Apache ECharts （连续）

timeline. axisType = 'time'

轴的类型。可选值为：

'value' 数值轴，适用于连续数据。

'category' 类目轴，适用于离散的类目数据。

'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。