Echarts通过svg画扇形例子,含矩形、三角形等

news/2025/1/12 21:37:58/
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="841.89px" height="595.275px" viewBox="0 0 841.89 595.275" enable-background="new 0 0 841.89 595.275"xml:space="preserve"><rect name="区域" x="97.096" y="49.827" fill="none" stroke="#FFFFFF" stroke-width="3.0821" width="856" height="493"/><circle name="中圈" fill="none" stroke="#FFFFFF" stroke-width="3.0821" cx="425.127" cy="296.913" r="50.683"/>
<circle name="开球点" fill="#FFFFFF" cx="425.126" cy="296.913" r="4.109"/><path name="禁区弧线1" fill="#FFFFFF" stroke="#0FFFFF" stroke-width="3.0821" d="M188.312,257.923c11.29,9.231,18.496,23.27,18.496,38.99c0,15.718-7.203,29.753-18.488,38.982"/>
<rect name="禁区1" fill="none" x="96.879" y="186.983"  stroke="#FFFFFF" stroke-width="3.0821" width="91.438" height="220.885"/><path name="三角形" fill="red" stroke="blue" d="M150 50 L130 130 L170 130  Z"/>
<rect name="矩形" fill="#FFFFFF" x="255" y="125"  stroke="#0FFFFF" stroke-width="3.0821" width="16.437" height="45"/>
<path d="M275,175 h-100 a100,100 0 1,0 100,-100 z" fill="red" stroke="blue" stroke-width="5"/>
<path d="M130 25  A 30 30 0 0 1 55 25" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
<path name="三角形" fill="red" stroke="blue" d="M550 250 L570 325 L530 325  Z"/>
<rect name="矩形" fill="#FFFFFF" x="580" y="250"  stroke="#0FFFFF" stroke-width="3" width="16" height="75"/>
<path d="M630 325  A 50 50 0 0 1 530 325 L630 325 z" stroke="black" fill="blue" stroke-width="2" fill-opacity="0.5"/><path name="三角形" fill="red" stroke="blue" d="M750 250 L770 325 L730 325  Z"/>
<rect name="矩形" fill="red" x="780" y="225"  stroke="red" stroke-width="0" width="20" height="75"/>
<rect name="矩形" fill="#FFFFFF" x="780" y="300"  stroke="#0FFFFF" stroke-width="0" width="20" height="25"/>
<rect name="矩形" fill="purple" x="800" y="225"  stroke-width="0" width="25" height="100"/>
<path d="M830 325  A 50 50 0 0 1 740 365 L780 325 z" stroke="black" fill="yellow" stroke-width="2" fill-opacity="0.5"/>
<path d="M730 325  A 50 50 0 0 0 740 365 L780 325 z" stroke="black" fill="red" stroke-width="2" fill-opacity="0.5"/>M移动到起点730 325 A画弧线到终点740,365,  L连接点740,365和780 325,z将图形封闭起来。
</svg>


<path d="M730 325  A 50 50 0 0 0 740 365 L780 325 z" stroke="black" fill="red" stroke-width="2" fill-opacity="0.5"/>M移动到起点730 325 A画弧线到终点740,365,  L连接点740,365和780 325,z将图形封闭起来。
首先移动到起点730,325,然后画曲线到740,365,再直线连接点740,365和点780,325,最后将画的曲线封闭起来,这样就成了一个扇形

所以画扇形的方法就是

Mx y A r r 0 0 0 x+r-r*cos(α)  y+r*sin(α)  L x+r y z

这样就可以了,其中α为扇形的角,r为半径



http://www.ppmy.cn/news/263932.html

相关文章

SVG画矩形、半圆、三角形

<?xml version"1.0" encoding"utf-8"?> <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphi…

【先楫HPM6750系列】HPM6750EVKMINI开箱和资料下载

去年年底&#xff0c;我就在网络上看到了关于HPM6750的相关新闻&#xff0c;当时记住了两条关键信息——RISC-V内核、主频高达800MHz。 因此&#xff0c;我在了解到eeworld上有HPM6750的试用活动后&#xff0c;立即报名了此次试用活动。 一段时间后&#xff0c;EEWorld的小编…

HaaS506 - M320快速开始

HaaS506 - M320 - 快速开始 HaaS506 介绍HaaS506 快速开始一. 下载并安装驱动1.1 CH340 driver1.2 雁飞USB驱动 二. 搭建开发环境2.0 集合开发工具HaaS506PYcom2.1 HaaS Studio开发环境 三. HaaS506串口名称确认四. 新建案例项目五. 尝试烧录流水灯代码六. HaaS506 Python固件下…

六轴传感器MPU6050

1.六轴与九轴的区别 六轴包括&#xff1a;三轴加速度计、三轴陀螺仪 九轴包括&#xff1a;三轴加速度计、三轴陀螺仪、三轴磁强计 2.MPU6050简单介绍 MPU6050 是 InvenSense 公司推出的全球首款整合性 6 轴运动处理组件&#xff0c;相较于多组件方案&#xff0c;免除了组合…

ESXI 6.7 系统安装详细过程

本次安装的物理机为DELL M630 镜像在上一章节中&#xff0c;有提供下载地址 安装方式 &#xff0c;可以通过刻录光碟或通过DELL 的iDRAC控制台挂载虚拟光驱进行 启动物理机&#xff0c;出现如下界面时&#xff0c;按F11 选择正确的安装源&#xff08;光驱、USB或虚拟光驱&am…

dell m630刀片服务器千兆网卡不能自适应

单位的新加了5台刀片服务卡器&#xff0c;3台M630以及2台M820。我系统都是装的windows 2008R2 其中一台M630今天临时说要连接公网而且要分配外网IP&#xff0c;做好网线和外网连接&#xff0c;用笔记本输入公网IP后测试都是正常&#xff0c;但是连上M630网卡连灯都不亮&#xf…

【spring cloud streamMQ】采用新版 spring 官方推荐 streamBridge 生产消费 streamMQ 示例

&#x1f338; spring 官方推荐使用 streamBridge 生产消费 streamMQ 示例 &#x1f338; 官方demo&#xff1a;https://github.com/spring-cloud/spring-cloud-stream-samples/blob/main/streambridge-samples/stream-bridge-avro/src/main/java/com/example/stream/bridge/av…