用html贝塞尔曲线绘制海豚,echarts 用 bezier-js 绘制贝塞尔曲线

确实有点好看了

bezier-js 调用时 是 起点+中间点+终点的方式, 一般两个中间点就够了

新主题确实好看了一点

bezierjs

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);

});