• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

[开源][示例更新]eCharts配置简化包OptionCreator[typescript版]

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Typescript的interface、class和abstract class发布时间:2022-07-18
下一篇:
深入理解TypeScript——第一章:上手篇发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap