1.在项目中我们经常使用echarts来实现图表功能，但是最近项目中遇到一个同心圆加坐标的图表，大家都知道echarts中雷达图不能设置坐标轴，所以采用了canvas来绘画
2.直接上效果图
3.上代码
<template> <div> <canvas id="myCanvas" width="480" height="480" style="background: black;"> 实现同心圆带坐标的雷达图 </canvas> </div> </template>
<script> export default { name: 'BugHomeView', data () { return { }; }, mounted () { this.getCanvas(); }, methods: { // canvas getCanvas () { let cav = document.getElementById("myCanvas"); let ctx = cav.getContext("2d"); // 获取画笔 // 画同心圆 let w = 480; let h = 480; ctx.strokeStyle = "red"; // 线条颜色 ctx.lineWidth = 1; // 线条宽度 for (let r = 60; r <= 180; r += 60) { ctx.beginPath(); ctx.arc(w / 2, h / 2, r, 0, 2 * Math.PI, true); ctx.stroke(); } // canvas默认原点在画布的左上角 而且x轴向右，y轴向下 // 改变原点 ctx.translate(240, 240); ctx.scale(1, -1); // x轴 ctx.beginPath(); ctx.moveTo(-210, 0); ctx.lineTo(210, 0); ctx.stroke(); // y轴 ctx.beginPath(); ctx.moveTo(0, -210); ctx.lineTo(0, 210); ctx.stroke(); // x轴小三角 ctx.beginPath(); ctx.moveTo(210, -5); ctx.lineTo(210, 5); ctx.lineTo(220, 0); ctx.lineTo(210, -5); ctx.fiillStyle = "red"; ctx.fill(); ctx.stroke(); // y轴小三角 ctx.beginPath(); ctx.moveTo(-5, 210); ctx.lineTo(5, 210); ctx.lineTo(0, 220); ctx.lineTo(-5, 210); ctx.fiillStyle = "red"; ctx.fill(); ctx.stroke(); } }, }; </script>
4.后续会更新canvas的方法以及一些项目中遇到的bug,大家可以在评论区留言相互学习交流
