用Echarts打造一個(gè)輪播圖！

點(diǎn)擊上方“數(shù)據(jù)管道”，選擇“置頂星標(biāo)”公眾號(hào)

干貨福利，第一時(shí)間送達(dá)

最近，在B站上學(xué)習(xí)了一些Echarts的使用，分享給大家。

一個(gè)動(dòng)態(tài)的柱狀輪播圖，本想著使用Pyecharts來(lái)實(shí)現(xiàn)的，奈何實(shí)現(xiàn)不了動(dòng)態(tài)。

看來(lái)做酷炫的可視化大屏還是得上Echarts和D3。

Echarts文檔地址

https://echarts.apache.org/zh/option.html

可供選擇的配置超級(jí)多～

還是在Vue.js這個(gè)框架下敲代碼。

首先需要安裝Node.js以及NPM，然后安裝Vue.js及Vue腳手架3.0。

這個(gè)在之前動(dòng)態(tài)氣泡圖的文章中也提到過(guò)了。

#?安裝Vue.js
npm?install?vue

#?安裝Vue-cli3腳手架
npm?install?-g?@vue/cli

命令行創(chuàng)建項(xiàng)目。

#?創(chuàng)建名為learn_echarts的項(xiàng)目
vue?create?learn_echarts

結(jié)果如下，選擇自定義配置(第三個(gè))。

選擇Babel、Router、CSS Pre-processors及Linter / Formatter。

其中「Babel」負(fù)責(zé)JS和Vue模版語(yǔ)法解析，「Router」負(fù)責(zé)前端路由功能。

「CSS Pre-processors」負(fù)責(zé)樣式文件的預(yù)編譯，「Linter / Formatter」負(fù)責(zé)代碼規(guī)范。

使用history模式來(lái)創(chuàng)建路由(是)，CSS預(yù)處理模式(Less)。

ESLint處理模式(標(biāo)準(zhǔn)模式)，ESLint提示(保存時(shí))，配置文件處理(放置在獨(dú)立文件夾)，是否將配置保存為預(yù)設(shè)(否)。

項(xiàng)目創(chuàng)建成功后，在項(xiàng)目文件夾的終端里運(yùn)行如下命令。

#?運(yùn)行項(xiàng)目
npm?run?serve

就可以在http://localhost:8080/訪問(wèn)到如下網(wǎng)頁(yè)。

修改App.vue文件內(nèi)容如下。