### 前言 eCharts作為國內優秀的開源圖表工具，功能強大，但是使用中也存在一定的問題。 - 文件更新較慢，文件說明不詳細。 - 前端使用的弱型別語言，資料結構在靈活的同時，也容易造成一些問題。例如某些屬性到底應該放入怎麼樣的資料才是正確的（文件也沒有提到）。 - 大小寫敏感，配置不但拼寫要正確，大小寫也不能錯 - 階層結構複雜 ### 目的 該專案的開發，包括一個以原始碼形式釋出的Typescript庫，以及一個示例網站。 - 驗證eCharts封裝程式碼的正確性 - 提供未來視覺化專案的腳手架 - 記錄eCharts的使用經驗和填坑過程 ### 使用例 ```ts 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/magicdic