[開源][示例更新]eCharts配置簡化包OptionCreator[typescript版]

時間 2020-07-16

標籤開源示例更新 echarts 配置簡化 optioncreator typescript 简体版

原文原文鏈接

前言

eCharts做爲國內優秀的開源圖表工具，功能強大，可是使用中也存在必定的問題。前端

文檔更新較慢，文檔說明不詳細。
前端使用的弱類型語言，數據結構在靈活的同時，也容易形成一些問題。例如某些屬性到底應該放入怎麼樣的數據纔是正確的（文檔也沒有提到）。
大小寫敏感，配置不但拼寫要正確，大小寫也不能錯
階層結構複雜

目的

該項目的開發，包括一個以源碼形式發佈的Typescript庫，以及一個示例網站。git

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