自己开发图表插件,脱离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

相关文章
|
2月前
|
XML 前端开发 JavaScript
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
27 0
|
1月前
|
数据可视化 前端开发
web前端-Echarts-5.3高级可视化和图表组合布局
web前端-Echarts-5.3高级可视化和图表组合布局
|
9月前
|
前端开发 JavaScript 容器
Echarts实战案例代码(31):模态框弹出层无法正常显示echarts图表的解决方案
Echarts实战案例代码(31):模态框弹出层无法正常显示echarts图表的解决方案
179 1
|
5月前
|
JSON 小程序 前端开发
小程序Echarts图表组件使用
小程序Echarts图表组件使用
50 0
|
9月前
|
前端开发 数据可视化
漏刻有时数据可视化Echarts组件开发(1):报警状态组件CSS代码及封装函数
漏刻有时数据可视化Echarts组件开发(1):报警状态组件CSS代码及封装函数
40 0
|
9月前
|
XML 人工智能 搜索推荐
Echarts实战案例代码(5):liquidFill水球组件利用svg path定制你自己的个性化图标动态图
Echarts实战案例代码(5):liquidFill水球组件利用svg path定制你自己的个性化图标动态图
241 0
|
10月前
|
数据可视化 JavaScript 前端开发
ElementUI实现表格内嵌进度条功能
ElementUI实现表格内嵌进度条功能
385 1
|
JavaScript API 容器
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解
|
小程序
mpvue小程序实现动态加载echart图表
本文主要基于mpvue框架实现小程序动态加载echart图表
372 0
mpvue小程序实现动态加载echart图表
|
前端开发
自己开发图表插件,脱离echart
自己开发图表插件,脱离echart