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

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

前言



由于公司业务需要做一些图标来展示一些数据,之前都是用百度的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

相关文章
|
JavaScript
在 Vue 中,如何使用SSR框架?
在 Vue 中,如何使用SSR框架?
160 2
|
12月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
887 14
|
11月前
|
前端开发 调度 UED
React 执行过程中 Fiber 的优先级是如何确定的?
【10月更文挑战第27天】React能够更加智能地管理任务的执行顺序,在保证用户交互体验的同时,充分利用系统资源,提高应用的整体性能和响应速度。
|
自然语言处理
箭头函数和普通函数的区别是什么?
箭头函数和普通函数的区别是什么?
770 63
|
5月前
|
人工智能 负载均衡 Java
Spring AI Alibaba 发布企业级 MCP 分布式部署方案
本文介绍了Spring AI Alibaba MCP的开发与应用,旨在解决企业级AI Agent在分布式环境下的部署和动态更新问题。通过集成Nacos,Spring AI Alibaba实现了流量负载均衡及节点变更动态感知等功能。开发者可方便地将企业内部业务系统发布为MCP服务或开发自己的AI Agent。文章详细描述了如何通过代理应用接入存量业务系统,以及全新MCP服务的开发流程,并提供了完整的配置示例和源码链接。未来,Spring AI Alibaba计划结合Nacos3的mcp-registry与mcp-router能力,进一步优化Agent开发体验。
1993 15
|
12月前
|
缓存 算法 Java
JVM知识体系学习六:JVM垃圾是什么、GC常用垃圾清除算法、堆内存逻辑分区、栈上分配、对象何时进入老年代、有关老年代新生代的两个问题、常见的垃圾回收器、CMS
这篇文章详细介绍了Java虚拟机(JVM)中的垃圾回收机制,包括垃圾的定义、垃圾回收算法、堆内存的逻辑分区、对象的内存分配和回收过程,以及不同垃圾回收器的工作原理和参数设置。
545 4
JVM知识体系学习六:JVM垃圾是什么、GC常用垃圾清除算法、堆内存逻辑分区、栈上分配、对象何时进入老年代、有关老年代新生代的两个问题、常见的垃圾回收器、CMS
|
编解码 安全 Linux
在Linux中,常用的远程连接⼯具有那些?
在Linux中,常用的远程连接⼯具有那些?
|
机器学习/深度学习 数据可视化 Python
NumPy 均匀分布模拟及 Seaborn 可视化教程
本文介绍了均匀分布和逻辑分布。均匀分布是连续概率分布,所有事件在指定范围内有相等概率,常用于随机数生成。其概率密度函数为 1/(b-a),其中 a 和 b 分别是下限和上限。NumPy 的 `random.uniform()` 可生成均匀分布的随机数。逻辑分布,或 Logistic 分布,常用于 S 形增长现象的建模和机器学习,如逻辑回归。它有两个参数:位置参数 loc 和尺度参数 scale。其概率密度函数涉及 1 + (x-loc)/scale 的倒数平方。
149 1
|
XML 缓存 IDE
解决Android Studio报错:Compilation is not supported for following modules
本文主要解决和"Compilation is not supported for following modules"有关的报错。
2285 0
解决Android Studio报错:Compilation is not supported for following modules
|
API Swift iOS开发
都2022年了,我们来看看iOS StoreKit 2 吧
都2022年了,我们来看看iOS StoreKit 2 吧
1319 0