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

相关文章
|
2月前
|
数据可视化 前端开发 数据安全/隐私保护
DIY可视化快速组件CSS样式设计生成源码
DIY可视化快速组件CSS样式设计生成源码
35 0
|
5月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
286 0
|
数据可视化 JavaScript
可视化拖拽组件库一些技术要点原理分析(二)(上)
可视化拖拽组件库一些技术要点原理分析(二)
110 1
|
7月前
|
数据可视化 前端开发
web前端-Echarts-5.3高级可视化和图表组合布局
web前端-Echarts-5.3高级可视化和图表组合布局
|
数据可视化 索引
可视化拖拽组件库一些技术要点原理分析(二)
可视化拖拽组件库一些技术要点原理分析(二)
155 0
|
数据可视化 API
可视化拖拽组件库一些技术要点原理分析(三)(二)
可视化拖拽组件库一些技术要点原理分析(三)(二)
108 0
|
7月前
|
API
【鸿蒙软件开发】ArkTS基础组件之Gauge(环形图表)、LoadingProgress(动态加载)
【鸿蒙软件开发】ArkTS基础组件之Gauge(环形图表)、LoadingProgress(动态加载)
416 0
|
存储 编解码 数据可视化
可视化拖拽组件库一些技术要点原理分析(三)
可视化拖拽组件库一些技术要点原理分析(三)
107 0
|
数据可视化 JavaScript 前端开发
可视化拖拽组件库一些技术要点原理分析(一)
可视化拖拽组件库一些技术要点原理分析(一)
253 0
|
JSON 数据可视化 前端开发
可视化拖拽组件库一些技术要点原理分析(二)(下)
可视化拖拽组件库一些技术要点原理分析(二)(下)
112 0