深度选择器

在 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中绘制时间线

 Examples - Apache ECharts(渐段)

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

Examples - Apache ECharts （连续）

Element - The world's most popular Vue UI framework