最近，在B站上學習了一些Echarts的使用，分享給大家。

一個動態的柱狀輪播圖，本想著使用Pyecharts來實現的，奈何實現不了動態。

看來做酷炫的可視化大屏還是得上Echarts和D3。

Echarts文檔地址

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

可供選擇的配置超級多～

還是在Vue.js這個框架下敲代碼。

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

這個在之前動態氣泡圖的文章中也提到過了。

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

命令行創建項目。

#?創建名為learn_echarts的項目
vue?create?learn_echarts

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

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

其中「Babel」負責JS和Vue模版語法解析，「Router」負責前端路由功能。

「CSS Pre-processors」負責樣式文件的預編譯，「Linter / Formatter」負責代碼規范。

使用history模式來創建路由(是)，CSS預處理模式(Less)。

ESLint處理模式(標準模式)，ESLint提示(保存時)，配置文件處理(放置在獨立文件夾)，是否將配置保存為預設(否)。

項目創建成功后，在項目文件夾的終端里運行如下命令。

#?運行項目
npm?run?serve

就可以在http://localhost:8080/訪問到如下網頁。

修改App.vue文件內容如下。

<div?id="app"><router-view>router-view>div>template>

運行項目發現錯誤，修改eslintrc.js文件，內容如下。

module.exports?=?{
??root:?true,
??env:?{
????node:?true
??},
??extends:?[
????'plugin:vue/essential',
????//'@vue/standard'
??],
??parserOptions:?{
????parser:?'babel-eslint'
??},
??rules:?{
????//'no-console':?process.env.NODE_ENV?===?'production'???'warn'?:?'off',
????//'no-debugger':?process.env.NODE_ENV?===?'production'???'warn'?:?'off'
????"space-before-function-paren":?0
??}
}

可能是因為代碼里有不符合規范的空格存在...

修改router(路由)文件夾下的index.js文件。

import?Vue?from?'vue'
import?VueRouter?from?'vue-router'
import?RankPage?from?'../views/RankPage.vue'

Vue.use(VueRouter)

const?routes?=?[
??{
????path:?'/rankpage',
????component:?RankPage
??},
]

const?router?=?new?VueRouter({
??mode:?'history',
??routes
})

export?default?router

在components文件夾下刪除HelloWorld.vue文件，添加Rank.vue文件。

??<div?class="com-container">
????<div?class="com-chart"?ref="rank_ref">我是rank組件div>
??div>
</template>

script>

<style?lang="less"?scoped>style>

在views文件夾下刪除About.vue及Home.vue文件，添加RankPage.vue文件。

??<div?class="com-page">
????<rank>rank>
??div>
</template>

components/Rank";
export?default?{
??data()?{
????return?{};
??},
??components:?{
????Rank,
??},
};

這樣我們就可以如下地址訪問到信息了，即路由創建成功。

http://localhost:8080/rankpage(頁面顯示我是rank組件)

這里記得設置一下全局的CSS。

在項目的src/assets路徑下新建一個css文件夾，新建一個全局的global.less文件。

html,?body,?#app?{width:?100%;
????height:?100%;
????padding:?0;
????margin:?0;
????overflow:?hidden;
}
.com-page?{width:?100%;
????height:?100%;
????overflow:?hidden;
}
.com-container?{width:?100%;
????height:?100%;
????overflow:?hidden;
}
.com-chart?{width:?100%;
????height:?100%;
????overflow:?hidden;
}
canvas?{
????border-radius:?20px;
}
.com-container?{position:?relative;
}

最后在main.js中引入，有大小的容器，才能顯示出圖表。

import?'./assets/css/global.less'

在GitHub上下載Echarts的文件(echarts.min.js)。

#?地址
https://github.com/apache/incubator-echarts/tree/4.9.0/dist

文件下載后，放置在項目的public/static/lib目錄下。

在public的index.html及main.js中進行引用。

//?index.html中引入

總結

以上是生活随笔為你收集整理的echarts formatter_牛X！用 Echarts 打造一个轮播图！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。