echarts 用 bezier-js 繪製貝塞爾曲線

原文鏈接: echarts 用 bezier-js 繪製貝塞爾曲線

確實有點好看了

https://echarts.apache.org/zh/index.html

https://github.com/Pomax/bezierjs

 

bezier-js 調用時 是 起點+中間點+終點的方式, 一般兩個中間點就夠了

新主題確實好看了一點

<template>
  <div>bezierjs</div>
  <canvas id="chart"></canvas>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { Bezier } from "bezier-js";
import * as echarts from "echarts";

onMounted(() => {
  console.log("Bezier", Bezier, echarts);
  // const b = new Bezier([10, 20, 30, 40]);
  // const b = new Bezier([100, 40, -500, 30, 200, 200]);
  const b = new Bezier(100, 25, 10, 90, -100, 90, 200, 200);
  const size = 1000;
  const data = Array(size - 1)
    .fill(0)
    .map((_, k) => Object.values(b.get(k / size)));
  const canvas = document.getElementById("chart")! as HTMLCanvasElement;
  canvas.width = 1000;
  canvas.height = 800;
  const myChart = echarts.init(canvas);
  // 指定圖表的配置項和數據
  const option = {
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: data,
        type: "line",
      },
    ],
  };

  // 使用剛指定的配置項和數據顯示圖表。
  myChart.setOption(option);
});
</script>

<style></style>