初試Echarts (一)

liangdas 發(fā)布于2019-08-23 11:55 / 3225人閱讀

摘要：是基于圖畫，可視化數(shù)據(jù)工具。如圖更多的配置可以看官方的配置項(xiàng)手冊(cè)，每一項(xiàng)都有很詳細(xì)的說(shuō)明。參考本地創(chuàng)建了文件用于儲(chǔ)存數(shù)據(jù)然后異步請(qǐng)求。因?yàn)槭褂玫?，所以引入了一個(gè)。使用的非常好用。

Echarts.js是基于canvas 圖畫，可視化數(shù)據(jù)工具。

Echarts官方案例

官網(wǎng)下載Echarts
然后引入官網(wǎng)下載Echarts.js



  
    
    ECharts 入門示例--柱狀圖

如圖：

更多的配置可以看官方的配置項(xiàng)手冊(cè)，每一項(xiàng)都有很詳細(xì)的說(shuō)明。

異步讀取數(shù)據(jù) 填充圖表

正常來(lái)說(shuō)我的圖表的數(shù)據(jù)都是異步加載的不會(huì)都是寫死的按照教程的異步加載我的瀏覽器是報(bào)一個(gè)錯(cuò)誤大概意思就是訪問的數(shù)據(jù)應(yīng)該是以http: 開頭的不然讀取不到
需要開啟一個(gè)虛擬的服務(wù)器才可以讀取本地的json數(shù)據(jù) 我是用node開啟了一個(gè)本地服務(wù)器。
參考：https://www.cnblogs.com/leoxu...
本地創(chuàng)建了dataj.json 文件用于儲(chǔ)存數(shù)據(jù),然后異步請(qǐng)求。
因?yàn)槭褂胘query的ajax，所以引入了一個(gè)jquery。
cnd使用的BootCND 非常好用。



  
    
    ECharts ajax加載
    
    
  
  

    

    
    若在Chrome瀏覽器下 想要訪問本地的data.json文件必須開起一個(gè)本地的虛擬服務(wù)器以http開頭
    

    原文博客地址：https://www.cnblogs.com/leoxuan/p/6513591.html

data.json

{"name":["Android","IOS","PC","Other"],"data1":[420,200,360,100],"data2":[460,260,390,200]}

如圖：

GPU云服務(wù)器云服務(wù)器初試 Echarts echarts 圖表 cdn echarts

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97664.html

相關(guān)文章

【2022考研最后40天】要注意這4個(gè)時(shí)間節(jié)點(diǎn)和這5件事情

摘要：請(qǐng)考生務(wù)必妥善保管個(gè)人網(wǎng)報(bào)用戶名密碼及準(zhǔn)考證居民身份證等證件，避免泄露丟失造成損失。自主劃線院校會(huì)在月陸續(xù)公布初試成績(jī)基本要求。鎖定時(shí)間到達(dá)后，如招生單位未明確受理意見，鎖定解除，考生可繼續(xù)填報(bào)其他志愿。 ...

jaysun 2021-11-18 10:02 評(píng)論0 收藏0
利用百度云發(fā)布node應(yīng)用：初試

摘要：一個(gè)百度開發(fā)者賬號(hào)，而且里面應(yīng)該要有錢哦。好了，應(yīng)該就是上面那幾個(gè)，下面我們開始，一在百度開發(fā)云上創(chuàng)建應(yīng)用對(duì)了應(yīng)該去哪里創(chuàng)建呢，走你。訪問配置斷線重連我們可以建一個(gè)這樣的配置，應(yīng)用啟動(dòng)時(shí)初始化。好了，現(xiàn)在我們可以體驗(yàn)百度云的樂趣了。準(zhǔn)備工作一個(gè)基于nodejs的應(yīng)用。一個(gè)百度開發(fā)者賬號(hào)，而且里面應(yīng)該要有錢哦。代碼上傳管理工具git或者svn。好了，應(yīng)該就是上面那幾個(gè)，下面我...

qqlcbb 2019-06-26 16:57 評(píng)論0 收藏0
Django前后端分離之REST framework初試

摘要：之前剛學(xué)時(shí)硬生生使用了靜態(tài)資源和接口分離的方法，實(shí)際使用中肯定會(huì)非常不方便。于是發(fā)現(xiàn)了用于前后端分離，編寫后臺(tái)的框架。之前剛學(xué)django時(shí)硬生生使用了靜態(tài)資源和接口分離的方法，實(shí)際使用中肯定會(huì)非常不方便。于是發(fā)現(xiàn)了用于前后端分離，編寫后臺(tái)API的REST framework框架。這里做初步嘗試官方文檔看起來(lái)非常入門本次實(shí)踐主要是根據(jù)官方文檔步驟進(jìn)行初步實(shí)踐，其中加入一些自己學(xué)習(xí)時(shí)理...

Scorpion 2019-07-30 17:44 評(píng)論0 收藏0
Next.js 初試

摘要：原文鏈接完喜歡的歡迎作者簡(jiǎn)介葉茂，蘆葦科技前端開發(fā)工程師，代表作品口紅挑戰(zhàn)網(wǎng)紅小游戲服務(wù)端渲染官網(wǎng)微信小程序粒子系統(tǒng)。擅長(zhǎng)網(wǎng)站建設(shè)公眾號(hào)開發(fā)微信小程序開發(fā)小游戲公眾號(hào)開發(fā)，專注于前端領(lǐng)域框架交互設(shè)計(jì)圖像繪制數(shù)據(jù)分析等研究。 title: next.js入門 tag：next.js, react 序章服務(wù)端渲染服務(wù)端渲染（SSR: Server Side Rendering）,h...

Markxu 2019-08-23 18:14 評(píng)論0 收藏0
初試小刀自我簡(jiǎn)歷小程序

摘要：附上個(gè)人簡(jiǎn)歷小程序圖，做得怎么樣，大家可以微信掃描體驗(yàn)下，多指教下。小程序開發(fā)資源匯總小程序開發(fā)框架在里面找了找，和比較火，畢竟是騰訊官方的開源，故我選擇了。 >>>點(diǎn)擊獲取更多文章

netmou 2019-08-23 10:48 評(píng)論0 收藏0