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

小小码 • 2023-03-19 09:30 • 代码基础 • 阅读 145

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说[开源][示例更新]eCharts配置简化包OptionCreator[typescript版][通俗易懂],希望您对编程的造诣更进一步.

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

前言

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

代码100分

alt