web

老板不让用ECharts，还想让我画很多圆环！

需求简介

这几天下来个新需求：要在页面上动态渲染多个表格，每个表格内还要实现若干圆环！

刚拿到这个需求的时候，我第一反应是用echarts实现，简单快捷

然而，老板无情的拒绝了我！他说：

咱这个项目就一个独立页面，你引入个ECharts项目又要大很多！而且一个页面这么多ECharts实例，性能怎么保障？不准用ECharts，用CSS实现！

没办法，我只好百度如何用CSS画圆环。幸运的是，我确实找到了类似的文章：

不幸的事，效果和我的差异很大，代码根本无法复用！没办法，只能用别的办法实现了。经过一番研究，最终借助Canvas搞出来了，简单的分享一下我的实现思路吧。

圆环组件简介

为了方便复用，我把这个功能封装成了项目可直接复用的组件。并支持自定义圆环大小、圆环宽度和圆环颜色比例配置属性。

<Ring

    :storkWidth="5"

    :size="60"

    :ratioList="[

        { ratio: 0.3, color: '#FF5733' },

        { ratio: 0.6, color: '#33FF57' },

        { ratio: 0.1, color: '#3357FF' }

    ]"

></Ring>

技术方案

实现目标

根据我们的UX需求，我们需要实现一个简单的组件，该组件可以展示一个圆环图表，并根据外部传入的比例数据（如 ratioList）绘制不同颜色的环形区域。

使用 Vue 3 和 TypeScript。
动态绘制环形图，根据传入的数据绘制多个环。
支持自定义环形图的大小和环宽。

创建 Vue 组件框架

首先，我们创建一个名为 RingChart.vue的组件。组件的初始结构非常简单，只包含一个 canvas 元素。

<template>

  <!-- 创建一个 canvas 元素，用于绘制图表 -->
<canvas ref="canvasDom"></canvas>

</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 获取 canvas DOM 元素的引用
const canvasDom = ref<HTMLCanvasElement | null>(null);

// 初始化 canvas 和上下文变量
let ctx: CanvasRenderingContext2D | null = null;
let width: number, height: number;

// 初始化 canvas 尺寸和绘图环境
const initCanvas = () => {
const dom = canvasDom.value;
if (!dom) return;

  ctx = dom.getContext('2d');
if (!ctx) return;

// 设置 canvas 的宽高

  dom.width = dom.offsetWidth;

  dom.height = dom.offsetHeight;

  width = dom.offsetWidth;

  height = dom.offsetHeight;

};

// 在组件挂载后执行初始化
onMounted(() => {
initCanvas();

});
</script>

<style scoped>
canvas {
width: 100%;
height: 100%;

}
</style>

上述代码中，我们初始化了 canvas 元素，并且设定了 width 和 height 属性。

绘制基本的圆环

接下来，我们添加绘制圆环的功能：通过 arc 方法来绘制圆环，设置 lineWidth 来调整环的宽度。

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 获取 canvas DOM 元素的引用
const canvasDom = ref<HTMLCanvasElement | null>(null);

// 初始化 canvas 和上下文变量
let ctx: CanvasRenderingContext2D | null = null;
let width: number, height: number;

// 初始化 canvas 尺寸和绘图环境
const initCanvas = () => {
const dom = canvasDom.value;
if (!dom) return;

  ctx = dom.getContext('2d');
if (!ctx) return;

// 设置 canvas 的宽高

  dom.width = dom.offsetWidth;

  dom.height = dom.offsetHeight;

  width = dom.offsetWidth;

  height = dom.offsetHeight;

// 调用绘制圆环的方法
drawCircle({

    ctx,
x: width / 2,
y: height / 2,
radius: 8,
lineWidth: 4,
color: '#C4C9CF4D',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,

  });

};

// 绘制一个圆环的方法
const drawCircle = ({

  ctx,

  x,

  y,

  radius,

  lineWidth,

  color,

  startAngle,

  endAngle,

}: {

  ctx: CanvasRenderingContext2D;

  x: number;

  y: number;

  radius: number;

  lineWidth: number;

  color: string;

  startAngle: number;

  endAngle: number;

}) => {

  ctx.beginPath();

  ctx.arc(x, y, radius, startAngle, endAngle);

  ctx.lineWidth = lineWidth;

  ctx.strokeStyle = color;

  ctx.stroke();

  ctx.closePath();

};

onMounted(() => {
initCanvas();

});

</script>

drawCircle 函数是绘制圆环的核心。我们通过 arc 方法绘制圆形路径，使用 lineWidth 来调整环的宽度，并用 strokeStyle 给圆环上色。
startAngle 和 endAngle 参数决定了圆环的起始和结束角度，通过改变它们可以控制环的覆盖区域。

绘制多个环形区域

现在，我们来实现绘制多个环形区域的功能。我们将通过传入一个 ratioList 数组来动态生成多个环，每个环代表不同的比例区域。

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';

// 定义 props 的类型

interface RatioItem {
ratio: number;
color: string;

}

const props = defineProps<{

  size?: number; // 画布大小

  storkWidth?: number; // 环的宽度

  ratioList?: RatioItem[]; // 比例列表

}>();

// 默认值
const defaultSize = 200;
const defaultStorkWidth = 4;
const defaultRatioList: RatioItem[] = [

  { ratio: 1, color: '#C4C9CF4D' },

];

// canvas DOM 和上下文
const canvasDom = ref<HTMLCanvasElement | null>(null);
let ctx: CanvasRenderingContext2D | null = null;

// 动态计算 canvas 的中心点和半径
const size = computed(() => props.size || defaultSize);
const center = computed(() => ({
x: size.value / 2,
y: size.value / 2,

}));
const radius = computed(() => size.value / 2 - (props.storkWidth || defaultStorkWidth));

// 初始化 canvas
const initCanvas = () => {
const dom = canvasDom.value;
if (!dom) return;


  ctx = dom.getContext('2d');
if (!ctx) return;


  dom.width = size.value;

  dom.height = size.value;

drawBackgroundCircle();
drawDataRings();

};

// 绘制背景圆环
const drawBackgroundCircle = () => {
if (!ctx) return;

drawCircle({

    ctx,
x: center.value.x,
y: center.value.y,
radius: radius.value,
lineWidth: props.storkWidth || defaultStorkWidth,
color: '#C4C9CF4D',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,

  });

};

// 绘制数据圆环
const drawDataRings = () => {
const { ratioList = defaultRatioList } = props;
if (!ctx) return;

let startAngle = -Math.PI / 2;

  ratioList.forEach(({ ratio, color }) => {
const endAngle = startAngle + ratio * Math.PI * 2;

drawCircle({

      ctx,
x: center.value.x,
y: center.value.y,
radius: radius.value,
lineWidth: props.storkWidth || defaultStorkWidth,

      color,

      startAngle,

      endAngle,

    });


    startAngle = endAngle;

  });

};

// 通用绘制函数
const drawCircle = ({

  ctx,

  x,

  y,

  radius,

  lineWidth,

  color,

  startAngle,

  endAngle,

}: {

  ctx: CanvasRenderingContext2D;

  x: number;

  y: number;

  radius: number;

  lineWidth: number;

  color: string;

  startAngle: number;

  endAngle: number;

}) => {

  ctx.beginPath();

  ctx.arc(x, y, radius, startAngle, endAngle);

  ctx.lineWidth = lineWidth;

  ctx.strokeStyle = color;

  ctx.stroke();

  ctx.closePath();

};

// 监听画布大小变化
onMounted(() => {
initCanvas();

});

</script>

上述代码中，我们通过 ratioList 数组传递每个环的比例和颜色，使用 startAngle 和 endAngle 来控制每个环的绘制区域。其中，drawDataRings 函数遍历 ratioList，根据每个数据项的比例绘制环形区域。

现在，我们的组件就实现完毕了，可以在其他地方引入使用了

<RingChart

    :storkWidth="8"

    :size="60"

    :ratioList="[

        { ratio: 0.3, color: '#F8766F' },

        { ratio: 0.6, color: '#69CD90' },

        { ratio: 0.1, color: '#FFB800' }

    ]"

></RRingChart>

组件代码

<template>
<canvas ref="canvasDom"></canvas>

</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watchEffect } from 'vue';

// 定义 props 的类型

interface RatioItem {
ratio: number;
color: string;

}

const props = defineProps<{

    size?: number; // 画布大小

    storkWidth?: number; // 环的宽度

    ratioList?: RatioItem[]; // 比例列表

}>();

// 默认值
const defaultSize = 200; // 默认画布宽高
const defaultStorkWidth = 4;
const defaultRatioList: RatioItem[] = [{ ratio: 1, color: '#C4C9CF4D' }];

// canvas DOM 和上下文
const canvasDom = ref<HTMLCanvasElement | null>(null);
let ctx: CanvasRenderingContext2D | null = null;

// 动态计算 canvas 的中心点和半径
const size = computed(() => props.size || defaultSize);
const center = computed(() => ({
x: size.value / 2,
y: size.value / 2

}));
const radius = computed(() => size.value / 2 - (props.storkWidth || defaultStorkWidth));

// 初始化 canvas
const initCanvas = () => {
const dom = canvasDom.value;
if (!dom) return;


    ctx = dom.getContext('2d');
if (!ctx) return;


    dom.width = size.value;

    dom.height = size.value;

drawBackgroundCircle();
drawDataRings();

};

// 绘制背景圆环
const drawBackgroundCircle = () => {
if (!ctx) return;

drawCircle({

        ctx,
x: center.value.x,
y: center.value.y,
radius: radius.value,
lineWidth: props.storkWidth || defaultStorkWidth,
color: '#C4C9CF4D',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5

    });

};

// 绘制数据圆环
const drawDataRings = () => {
const { ratioList = defaultRatioList } = props;
if (!ctx) return;

let startAngle = -Math.PI / 2;

    ratioList.forEach(({ ratio, color }) => {
const endAngle = startAngle + ratio * Math.PI * 2;

drawCircle({

            ctx,
x: center.value.x,
y: center.value.y,
radius: radius.value,
lineWidth: props.storkWidth || defaultStorkWidth,

            color,

            startAngle,

            endAngle

        });


        startAngle = endAngle;

    });

};

// 通用绘制函数
const drawCircle = ({

    ctx,

    x,

    y,

    radius,

    lineWidth,

    color,

    startAngle,

    endAngle

}: {

    ctx: CanvasRenderingContext2D;

    x: number;

    y: number;

    radius: number;

    lineWidth: number;

    color: string;

    startAngle: number;

    endAngle: number;

}) => {

    ctx.beginPath();

    ctx.arc(x, y, radius, startAngle, endAngle);

    ctx.lineWidth = lineWidth;

    ctx.strokeStyle = color;

    ctx.stroke();

    ctx.closePath();

};

// 监听画布大小变化
watchEffect(() => {
initCanvas();

});

onMounted(() => {
initCanvas();

});
</script>

<style scoped>
canvas {
display: block;
margin: auto;
border-radius: 50%;

}
</style>

使用

<Ring

    :storkWidth="5"

    :size="60"

    :ratioList="[

        { ratio: 0.3, color: '#FF5733' },

        { ratio: 0.6, color: '#33FF57' },

        { ratio: 0.1, color: '#3357FF' }

    ]"

></Ring>

总结

累了，今天不想写总结！

作者：快乐就是哈哈哈
来源：juejin.cn/post/7444014749321510963

0

2024-12-26

0 个评论

要回复文章请先登录或注册