前言

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