前言

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);

alt

进度

现时点完成功能如下

  • 折线图
    • markPoint
    • markLine
  • 柱状图
  • 极坐标图
  • 雷达图
  • 散点图
  • 地图
  • 百度地图
  • 日历图
  • 组合图
    • 雷达图 - 饼图
    • 饼图 - 折线图
  • 时间轴图
  • 3D散点图
  • 3D柱状图

截图:
alt

alt

alt

Demo:http://datavisualization.club:8081/basic/bar
Github:https://github.com/magicdict/VisLab

posted @ 2020-07-08 11:09 灰毛毛 阅读(534) 评论(0) 推荐(0) 编辑
摘要: eCharts存在问题 配置eCharts的option,对于大部分的开发者来说,复杂情况下是一件繁琐的事情。为什么繁琐,大致有以下这些原因 大小写敏感:在没有IDE的智能提示下,很容易写错,而且即使写错,eCharts不会报错,问题难以排查 阶层结构复杂:在复杂情况下,使用json手工编写配置,有 阅读全文
posted @ 2020-07-03 11:06 灰毛毛 阅读(541) 评论(0) 推荐(0) 编辑
摘要: 源代码地址 通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法。 "Github项目源代码地址" 在线体验网址(推荐使用移动设备访问) http://datavisualization.club:8888/ 极简游戏攻略 除了剧情对话之外,本游戏 阅读全文
posted @ 2020-04-10 11:32 灰毛毛 阅读(1148) 评论(1) 推荐(0) 编辑
摘要: RPG系统构造 通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法。 "Github项目源代码地址" RPG系统构造 ver0.02 2020/03/31 人物 和其他RPG游戏类似,游戏里面的人物角色大致有这样的一些属性:生命值,魔法值(魂力) 阅读全文
posted @ 2020-03-31 11:37 灰毛毛 阅读(1070) 评论(0) 推荐(0) 编辑
摘要: RPG系统构造 通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法。 "Github项目源代码地址" 人物 和其他RPG游戏类似,游戏里面的人物角色大致有这样的一些属性:生命值,魔法值(魂力),攻击力,防御力,速度。RPG游戏中的角色随着等级的提 阅读全文
posted @ 2020-03-25 11:13 灰毛毛 阅读(963) 评论(1) 推荐(2) 编辑
摘要: 开放域实体抽取泛用工具 https://github.com/magicdict/FDDC 更新时间 2018年7月16日 By 带着兔子去旅行 开发这个工具的起源是天池大数据竞赛,FDDC2018金融算法挑战赛02-A股上市公司公告信息抽取。这个比赛是针对金融公告开展的信息抽取比赛。在参赛过程中, 阅读全文
posted @ 2018-07-17 13:11 灰毛毛 阅读(2625) 评论(3) 推荐(0) 编辑
摘要: FDDC2018金融算法挑战赛02-A股上市公司公告信息抽取 更新时间 2018年7月11日 By 带着兔子去旅行 信息抽取是NLP里的一个实用内容。该工具的目标是打造一个泛用的自动信息抽取工具。使得没有任何基础的用户,可以通过简单的步骤提取文档(PDF,HTML,TXT)中的信息。该工具使用C ( 阅读全文
posted @ 2018-07-10 15:46 灰毛毛 阅读(2276) 评论(7) 推荐(6) 编辑
摘要: 前言 本文根据实际项目撰写,由于项目保密要求,源代码将进行一定程度的删减。 本文撰写的目的是进行公司培训,请勿以任何形式进行转载。 由于是日语项目,用到的分词软件等,在中文任务中需要替换为相应的中文分词软件。例如结巴分词 : https://github.com/fxsjy/jieba 前提知识和术 阅读全文
posted @ 2017-08-30 09:53 灰毛毛 阅读(11958) 评论(0) 推荐(3) 编辑
摘要: 前言 本文根据实际项目撰写,由于项目保密要求,源代码将进行一定程度的删减。 本文撰写的目的是进行公司培训,请勿以任何形式进行转载。 由于是日语项目,用到的分词软件等,在中文任务中需要替换为相应的中文分词软件。例如结巴分词 : https://github.com/fxsjy/jieba 前提知识和术 阅读全文
posted @ 2017-08-23 09:43 灰毛毛 阅读(1459) 评论(0) 推荐(3) 编辑
摘要: 【以前的文章】最后一公里极速配送 阿里云算法大赛总结 总结一下新的教训 1.由于都是NP难题,获得最优解用常规的方法非常困难,对于不是算法科班出身的人来说,首先应该到网络上寻找一下论文,是否有一些好的经验。 2.保持平常心,这种比赛获奖很困难,生活还是要和往常一样,只是将空余的时间给做比赛 3.每一 阅读全文
posted @ 2017-08-01 10:53 灰毛毛 阅读(2456) 评论(3) 推荐(2) 编辑
点击右上角即可分享
微信分享提示