當前位置：
首頁 >
5 分钟上手 ECharts
發布時間：2024/8/26
50
豆豆
生活随笔
收集整理的這篇文章主要介紹了
5 分钟上手 ECharts
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
獲取 ECharts
你可以通過以下幾種方式獲取 ECharts。
從官網下載界面選擇你需要的版本下載，根據開發者功能和體積上的需求，我們提供了不同打包的下載，如果你在體積上沒有要求，可以直接下載完整版本。開發環境建議下載源代碼版本，包含了常見的錯誤提示和警告。
在 ECharts 的?GitHub?上下載最新的?release?版本，解壓出來的文件夾里的?dist?目錄里可以找到最新版本的 echarts 庫。
通過 npm 獲取 echarts，npm install echarts --save，詳見“在 webpack 中使用 echarts”
cdn 引入，你可以在?cdnjs，npmcdn?或者國內的?bootcdn?上找到 ECharts 的最新版本。
引入 ECharts
ECharts 3 開始不再強制使用 AMD 的方式按需引入，代碼里也不再內置 AMD 加載器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標簽引入。
<!DOCTYPE html> <html> <head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script> </head> </html>繪制一個簡單的圖表
在繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器。
<body><!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div> </body>然后就可以通過?echarts.init?方法初始化一個 echarts 實例并通過?setOption?方法生成一個簡單的柱狀圖，下面是完整代碼。
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script> </head> <body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);</script> </body> </html>這樣你的第一個圖表就誕生了！
?
轉載于:https://www.cnblogs.com/ClassNotFoundException/p/6134898.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的5 分钟上手 ECharts的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： axis2 调用webservice
- 下一篇： js自定义双击函数