[开源][示例更新]eCharts配置简化包OptionCreator[typescript版]
2024-09-07 14:28:23
前言
eCharts作为国内优秀的开源图表工具,功能强大,但是使用中也存在一定的问题。
- 文档更新较慢,文档说明不详细。
- 前端使用的弱类型语言,数据结构在灵活的同时,也容易造成一些问题。例如某些属性到底应该放入怎么样的数据才是正确的(文档也没有提到)。
- 大小写敏感,配置不但拼写要正确,大小写也不能错
- 阶层结构复杂
目的
该项目的开发,包括一个以源码形式发布的Typescript库,以及一个示例网站。
- 验证eCharts封装代码的正确性
- 提供未来可视化项目的脚手架
- 记录eCharts的使用经验和填坑过程
使用例
this.Sample_Pie_Bar = PieOption.CreatePie(CommonFunction.clone(dataset), "65%");
this.Sample_Pie_Bar.series[0].label.show = true;
this.Sample_Pie_Bar.series[0]['color'] = ChartColor.colorlist_7_Baidu;
let category = ['唐三', '戴沐白', "马红俊", "奥斯卡", "小舞", "宁荣荣", "朱竹清"];
let value = [50, 100, 150, 70, 80, 120, 90];
let line = LineOption.CreateLineItem(value);
//line用坐标轴的修正
var line_xAsix = new Axis();
line_xAsix.type = "category";
line_xAsix.data = category;
var line_yAsix = new Axis();
line_yAsix.type = "value";
this.Sample_Pie_Bar.xAxis = [line_xAsix];
this.Sample_Pie_Bar.yAxis = [line_yAsix];
this.Sample_Pie_Bar.grid = [{
'top': '0%', 'left': '10%', 'width': '50%', 'height': '100'
}]
line_xAsix.gridIndex = 0;
line_yAsix.gridIndex = 0;
line.xAxisIndex = 0;
line.yAxisIndex = 0;
//图(Chart)和坐标(Axis)绑定,坐标和网格(Grid)绑定
this.Sample_Pie_Bar.series.push(line);
进度
现时点完成功能如下
- 折线图
- markPoint
- markLine
- 柱状图
- 极坐标图
- 雷达图
- 散点图
- 地图
- 百度地图
- 日历图
- 组合图
- 雷达图 - 饼图
- 饼图 - 折线图
- 时间轴图
- 3D散点图
- 3D柱状图
截图:
Demo:http://datavisualization.club:8081/basic/bar
Github:https://github.com/magicdict/VisLab
最新文章
- Pressure-sensitive pores scattered
- .Net Office开源组件
- [译]学习IPython进行交互式计算和数据可视化(二)
- win7 中maven安装
- Struts2版本配置2.1以前与以后---关于filter的配置
- AssemblyInfo.cs文件参数具体讲解
- Windows Azure 新上线网络相关服务
- PHP处理密码的几种方式【转载】
- C. Bear and Colors
- virtualbox中实施ASM扩容实施记录
- Android创建或删除了文件,在电脑端查看的时候,却没有对应的变化,处理办法
- 误删除(重命名)libc.so.6的处理方法
- Springboot admin 发送邮件失败:com.sun.mail.smtp.SMTPSenderFailedException: 553 Mail from must equal authorized user
- 项目(七)SVN版本管理与大型代码上线方案
- TypeScript基础类型,类实例和函数类型声明
- (9/24) 图片跳坑大战--css分离与图片路径处理
- 前端_标签01_input标签
- JS兼容各个浏览器的本地图片上传即时预览效果
- Android Launcher分析和修改
- C#高级编程9-第10章 集合
热门文章
- 【个人博客 hexo】一个小时就搭好属于自己的博客
- MongoDB知识点总结
- centos7 和centos6 服务操作命令对比
- 安装 KubeSphere DevOps 系统
- 短短1天我学会了如何修改Butterfly的配置文件
- Python 图像处理 OpenCV (10):图像处理形态学之顶帽运算与黑帽运算
- 当小程序的flex布局遇到button时,justify-content不起作用的原因及解决方案
- delete语句的基本用法
- cb18a_c++_修改string对象的方法
- cb14a_c++_顺序容器的操作7_赋值与交换(swap)_vector转list