前言 eCharts作為國內優秀的開源圖表工具，功能強大，但是使用中也存在一定的問題。 文檔更新較慢，文檔說明不詳細。 前端使用的弱類型語言，數據結構在靈活的同時，也容易造成一些問題。例如某些屬性到底應該放入怎麼樣的數據才是正確的（文檔也沒有提到）。 大小寫敏感，配置不但拼寫要正確，大小寫也不能錯 ...
前言
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
