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

資料視覺化俱樂部發表於2020-07-08
EchartsTypeScript

前言

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

相關文章