第一次寫博客，寫的不到望大家見諒！
今天給大家分享一個純js的插件（統計圖），有知道的可以在下面評論一起談論一下，剛學着的時候，我是看了好久才看懂的一個基本結構，到后來我才知道原來直接去原網站上找到復制下來js就可以了。
這是他的網址：https://www.echartsjs.com/zh/index.html 這個是人家官方的網址，大家可以現去看一下人家的效果，效果蠻多的，基本上可以滿足基本項目的需求。
下面我來給打架舉一個例子：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>統計圖</title> </head> <body> <div id="main" style="width: 100vw;height: 100vh;"></div> <script src="js/echarts.js"></script> <script> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: '堆疊區域圖' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['郵件營銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜索引擎'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '0%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] } ], yAxis: [ { type: 'value' } ], series: [ { name: '郵件營銷', type: 'line', stack: '總量', areaStyle: {}, data: [120, 132, 101, 134, 90, 230, 210] }, { name: '聯盟廣告', type: 'line', stack: '總量', areaStyle: {}, data: [220, 182, 191, 234, 290, 330, 310] }, { name: '視頻廣告', type: 'line', stack: '總量', areaStyle: {}, data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接訪問', type: 'line', stack: '總量', areaStyle: { normal: {} }, data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '總量', label: { normal: { show: true, position: 'top' } }, areaStyle: { normal: {} }, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>
這個例子中的js是本地的，你想下載的話就去 https://echarts.apache.org/zh/download.html ( 官方)
他上面還有使用的具體步驟，以及詳細的操作，不知道的小伙伴，可以是看看 ，這個插件我最看重的一點就是，他是原生js寫的，本人比較喜歡原生這些東西，雖然看起來有點費時間，但是只有從原生那才可以了解到一門語言的精髓，
最后感謝官方提供了這么方便的插件，以及祝各位程序猿們工作順利，
第一次寫 有什么需要補充的大家也可以說出來 我們討論一下，一起提高，一起進步！