自己开发图表插件,脱离echart

简介: 前言 由于公司业务需要做一些图标来展示一些数据,之前都是用百度的echart.js。这次放弃使用它转而自己开发是有几个原因1、echart文件太大,有些功能用不到2、echart样式不易扩展3、需求简单考虑上面几个原因就决定自己开发一个图标库,主要介绍折线图和雷达图 技术研究 绘制图表可以用canvas、svg、webgl等,echart是用canvas绘制,所以我就直接考虑用canvas。

前言

由于公司业务需要做一些图标来展示一些数据,之前都是用百度的echart.js。这次放弃使用它转而自己开发是有几个原因
1、echart文件太大,有些功能用不到
2、echart样式不易扩展
3、需求简单
考虑上面几个原因就决定自己开发一个图标库,主要介绍折线图和雷达图

技术研究

绘制图表可以用canvas、svg、webgl等,echart是用canvas绘制,所以我就直接考虑用canvas。
折线图:通过lineto将点连起来
雷达图:由外向内,通过arc、fill等方法绘制

主要问题

1、折线图转成曲线
通过网上查找资料,按照腾讯这篇文章来实现http://www.alloyteam.com/2015/08/zhe-xian-zhuan-qu-xian/
2、图片文字模糊
问题分析和解决这里已经总结https://github.com/baixuexiyang/wchart/wiki/canvas%E7%BB%98%E5%88%B6%E5%9B%BE%E7%89%87%E6%96%87%E5%AD%97%E6%A8%A1%E7%B3%8A

代码地址

https://github.com/baixuexiyang/wchart

相关文章
|
人工智能 云计算
阿里云产品手册2025版发布
阿里云产品手册2025版发布,涵盖阿里云产品大图、面向 AI 的全栈云计算产品体系等最新内容,囊括了阿里云产品介绍、优势、功能、应用场景和发展历程的介绍。
1955 12
|
10月前
|
存储 监控 定位技术
GPS 人员定位系统:原理拆解 + 优劣分析 + 避坑指南(二)
本文深入剖析GPS人员定位系统的核心优劣:户外信号广、成本低,但室内易失效、抗干扰弱。针对遮挡环境下的定位痛点,提出“GPS+UWB/蓝牙”融合方案,实现室内外无缝切换,并给出场景适配与避坑建议。
|
存储 测试技术 C#
Azure 云服务与 C# 集成浅谈
本文介绍了 Azure 云服务与 C# 的集成方法,涵盖基础概念、资源创建、SDK 使用、常见问题解决及单元测试等内容,通过代码示例详细说明了如何在 C# 中调用 Azure 服务,帮助开发者提高开发效率和代码质量。
430 8
|
设计模式 架构师 Java
探索设计模式的宝库:Java-Design-Patterns
GitHub热门项目**java-design-patterns**全面解析Java设计模式,提供经典解决方案与实战代码,助你掌握最佳实践,提升开发效率,持续更新,值得收藏学习!
333 0
|
运维 网络安全 PHP
2025年面板安装 Wordpress 网站教程
本文对比了2025年国内主流服务器运维面板(宝塔、1Panel、Websoft9、AMH、旗鱼云梯)的核心特点与适用场景,并详细介绍了各面板安装WordPress的教程。内容涵盖环境配置、数据库创建及源码部署等步骤,同时提供了通用注意事项与选择建议。新手可优先考虑操作直观的宝塔面板或云端管理工具旗鱼云梯,技术爱好者和企业用户则可根据需求选择更专业或定制化的方案。
2014 2
|
算法 编译器 程序员
深入调查研究尾递归优化
【10月更文挑战第21天】
602 1
|
存储 运维 监控
Linux--深入理与解linux文件系统与日志文件分析
深入理解 Linux 文件系统和日志文件分析,对于系统管理员和运维工程师来说至关重要。文件系统管理涉及到文件的组织、存储和检索,而日志文件则记录了系统和应用的运行状态,是排查故障和维护系统的重要依据。通过掌握文件系统和日志文件的管理和分析技能,可以有效提升系统的稳定性和安全性。
503 7
|
存储 缓存 负载均衡
带你认识DM 共享存储数据库集群
带你认识DM 共享存储数据库集群
794 3
|
安全 API 数据安全/隐私保护
上云时代的“细粒度”访问权限,拿捏!
亿格云自研的SASE一体化办公安全平台——亿格云枢,以身份为驱动的零信任SASE架构,提供稳定高效的网络访问体验,一个平台融合零信任访问、数据防泄漏、终端检测与响应、上网行为管理、合规基线检测等安全能力,实现内外部应用统一管控,确保无论是总部、分支机构、居家办公还是移动办公,都能达到一致的高标准安全防护,360°严密防护敏感数据!
|
人工智能 JSON 自然语言处理
我的Google Vertex AI实践经验分享
忙碌的开发者分享了使用Google Vertex AI的实践经验。从复杂的初始设置到微调模型时的手动资源分配,作者经历了种种挑战,包括高昂的成本与不足的文档支持。尽管如此,Vertex AI在图像识别和自然语言处理方面展现出强大能力。作者希望反馈能帮助Google改进服务,使之更加用户友好。
1064 2

热门文章

最新文章