百度-ECharts(網頁 WEB UI 圖表函式庫)教學收藏備份
百度-ECharts(網頁 WEB UI 圖表函式庫)教學收藏備份
GITHUB: https://github.com/jash-git/WebUI_Chart_Lib-ECharts
下載來源:https://echarts.baidu.com/download.html
[echarts.common.min]常用-包含常用圖表元件(折線、柱狀、圓餅、散點、圖例、工具列、標註/線…)
[echarts.simple.min]精簡-只包含折線、柱狀、圓餅
[echarts.min]完整-包含所有
[echarts]源代碼
教學: https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-mec528xa.html
範例: http://echarts.baidu.com/echarts2/doc/example.html
2 thoughts on “百度-ECharts(網頁 WEB UI 圖表函式庫)教學收藏備份”
有相關書籍上市了
https://mp.weixin.qq.com/s/5jQYHPLR_aC1oGBcVdwJ-Q
資訊圖像化圖表程式比較
免費區
Chart.js
https://github.com/chartjs/Chart.js
MIT授權 範例多，支援rwd，有配合資料動態的小動畫，操作簡單，目前的首選 2021年巡查發現持續更新中
推薦外掛 piechart
https://emn178.github.io/chartjs-plugin-labels/samples/demo/
推薦外掛 data labels plugin
https://chartjs-plugin-datalabels.netlify.com/samples/
推薦外掛 即時串流圖表 plugin
https://github.com/nagix/chartjs-plugin-streaming
https://nagix.github.io/chartjs-plugin-streaming/samples/interactions.html
Visjs
https://visjs.org/
MIT授權 範例多，無圓餅圖，但其他圖形多 (如 network 拓譜圖 timeline時間軸圖)，範例無RWD
有簡中的文件
https://ame.cool/core/frontend-tools/
echarts
https://echarts.apache.org/zh/index.html
Apache2.0授權 範例多，3D類圖型強，可免費商業使用，有簡體中文教學
v4可支援IE8，目前的v5已不支援IE8
前身是 百度 echarts，以下網址隨時會失效，純供紀錄
https://vis.baidu.com/
http://echarts.baidu.com/
Plotly.js
https://plot.ly/javascript/
MIT授權 範例多，支援rwd，有3D圖像，支援IE9+
可用python和R語言操作，有線上編輯器(可能要付費)
jQuery Flot
https://github.com/flot/flot
MIT授權 有中文教學(http://www.jqueryflottutorial.com/tw/what-is-jquery-flot.html)
最後更新是2014年 範例數量中等
d3.js
https://github.com/d3/d3
bsd授權 可免費商業使用 教學多範例多，但操作較困難 使用的物件是SVG，某些範例的圖列印時可能印不出來
C3.js D3-based reusable chart library
https://github.com/c3js/c3
MIT授權 基於d3.js的簡易繪圖框架 圖表範例多 一樣某些圖列印時可能印不出來
animated-3d-piechart、react-pie3d
https://github.com/woles/animated-3d-piechart
MIT授權，最後更新是2016年(專案已封存，作者另外做了react-pie3d專案)，基於d3.js 僅有圓餅圖 沒有中文教學
react-pie3d
https://github.com/woles/react-pie3d
MIT授權，最後更新是2019，範例請見以下網址
https://woles.github.io/react-pie3d-demo/
CHARTIST.JS
http://gionkunz.github.io/chartist-js/index.html
MIT授權 支援IE9 最後更新是2019年9月 有RWD 有CSS動畫的範例，只有10kb，有 Line、Bar、Pie等三大類範例
jqPlot
http://www.jqplot.com/
MIT 授權 GPL 授權 圖表的互動性(動畫)看起來較低 ，支援ie7
中文教學看起來滿多的 http://www.sinmeng.net/info/31-31952-1.html
Google Charts
https://developers.google.com/chart/
免費，可商業使用，可列印，圖型種類多，但只支援CDN，不能離線使用
n3-charts
http://n3-charts.github.io/line-chart/#/home
MIT 授權，範例可直連codepen直接線上調整，有支援RWD，但範例僅有10個偏少
付費區
highcharts
https://www.highcharts.com/
歷史悠久 一個開發者 USD430 https://shop.highsoft.com/highcharts
CanvasJS
https://canvasjs.com
一個網站USD149 一個開發者USD299 五個開發者USD799
FusionCharts
https://www.fusioncharts.com
一個開發者 USD497
amCharts
https://www.amcharts.com/v4/
商業使用需付費 一個站USD140~280， https://www.amcharts.com/online-store/
授權連接：https://github.com/amcharts/amcharts4/blob/master/dist/script/LICENSE
線上編輯：https://live.amcharts.com/
有3D的圓餅圖跟直條圖 範例數量不算多 好像沒有什麼中文教學
但看到有人說對中文支援不優 好像會跑版 但沒實作
JavaScript Charts & Maps
https://www.amcharts.com/
價格視內容的大小而定，似乎可以免費使用只是圖表旁邊都會有logo
看起來挺美的還沒仔細看
額外補充
這邊放了一些有關資訊圖像化的設計概念文章，可以參考
https://hackmd.io/2QGiY6SCTtWOmsmnuFSE0g