svg.js 构建自定义折线表

let draw,
  timer,
  polylineStart,
  polylinePhase1,
  polylinePhase2,
  polygonHightlight; //高亮区域
const curve = {
  width: 273,
  height: 180,
  d1: 120, //overdrawnPrice虚线->liq.Price虚线距离
  d2: 60, //liq.Price虚线->y轴初始位置
  scaleY: 1,
  scaleX: 273 / 128 / 3,
  color: "#FCE6DC",
  activeColor: "#EF814F",
  lineWidth: 2,
  startPointsNum: 6, //起始20s的坐标点个数
  gap: 3 //x轴坐标间距
};
onMounted(async () => {
  draw = SVG()
    .addTo("#price-curve")
    .size("100%", "180px");
  await fetchPrice(route.params.id);
  // 生成多边形构造器
  polylineStart = draw.polyline();
  polylinePhase1 = draw.polyline();
  polylinePhase2 = draw.polyline();
  polygonHightlight = draw.polygon();
  //每3s获取一次历史价格，每40s渲染一次图像
  timer = setInterval(
    (() => {
      let counter = 0;
      return () => {
        counter += 40;
        if (counter >= 3000) {
          fetchPrice(route.params.id);
          counter = 0;
        }
        renderCurve();
      };
    })(),
    40
  );
  if (el.value) {
    el.value.addEventListener("mouseover", mouseoverHanlder);
    el.value.addEventListener("mouseout", mouseoutHandler);
  }
});
    //鼠标移出事件
    function mouseoutHandler() {
      state.phase1.isActive = false;
      state.phase2.isActive = false;
    }
    //渲染折线
    function renderCurve() {
      //start
      const startData = state.coordinates.slice(0, curve.startPointsNum);
      polylineStart
        .plot(startData)
        .fill("none")
        .stroke({
          color: curve.color,
          width: curve.lineWidth,
          linecap: "round"
        });
      //phase 1
      const phase1Data = state.coordinates.slice(
        curve.startPointsNum - 1,
        state.phase2Index ? state.phase2Index : state.coordinates.length
      );
      polylinePhase1
        .plot(phase1Data)
        .fill("none")
        .stroke({
          color: state.phase1.color,
          width: curve.lineWidth,
          linecap: "round"
        });
      //phase 2
      let phase2Data = [];
      if (state.phase2Index) {
        phase2Data = state.coordinates.slice(state.phase2Index - 1);
        polylinePhase2
          .plot(phase2Data)
          .fill("none")
          .stroke({
            color: state.phase2.color,
            width: curve.lineWidth,
            linecap: "round"
          });
      }
      //highlightArea
      let hightlightData = [];
      if (state.phase1.isActive && phase1Data.length > 0) {
        hightlightData = phase1Data;
        hightlightData.unshift(phase1Data[0][0], curve.height);
        hightlightData.push(phase1Data[phase1Data.length - 1][0], curve.height);
      } else if (
        state.phase2Index &&
        state.phase2.isActive &&
        phase2Data.length > 0
      ) {
        hightlightData = phase2Data;
        hightlightData.unshift(phase2Data[0][0], curve.height);
        hightlightData.push(phase2Data[phase2Data.length - 1][0], curve.height);
      }
      polygonHightlight.plot(hightlightData).fill(
        draw
          .gradient("linear", add => {
            add.stop({ offset: 0, color: curve.activeColor, opacity: 0.5 });
            add.stop({ offset: 1, color: "#fff" });
          })
          .from(0, 0)
          .to(0, 1)
      );
    }
onBeforeUnmount(() => {
  if (timer) clearInterval(timer);
});