最近,在B站上学习了一些Echarts的使用,分享给大家。
一个动态的柱状轮播图,本想着使用Pyecharts来实现的,奈何实现不了动态。
看来做酷炫的可视化大屏还是得上Echarts和D3。
Echarts文档地址
https://echarts.apache.org/zh/option.html
可供选择的配置超级多~
![927284fbd16e89ff27cc5712a8ea9303.png](https://i-blog.csdnimg.cn/blog_migrate/09bfece474e4306fdde85f4bb5a06590.png)
还是在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
结果如下,选择自定义配置(第三个)。
![34b98c7cae0f2510410b42d76dc21527.png](https://i-blog.csdnimg.cn/blog_migrate/0bd735fb5cb3e6432430826659df8e25.png)
选择Babel、Router、CSS Pre-processors及Linter / Formatter。
![8a0ee8dca55622828eb693dcec724188.png](https://i-blog.csdnimg.cn/blog_migrate/11889eea4ea54ce2948e62c27db6beb6.png)
其中「Babel」负责JS和Vue模版语法解析,「Router」负责前端路由功能。
「CSS Pre-processors」负责样式文件的预编译,「Linter / Formatter」负责代码规范。
使用history模式来创建路由(是),CSS预处理模式(Less)。
![6273ef4d78e495b26300624fd4fcee33.png](https://i-blog.csdnimg.cn/blog_migrate/6a471a205ebf97aa9c5c32aac63701ca.png)
ESLint处理模式(标准模式),ESLint提示(保存时),配置文件处理(放置在独立文件夹),是否将配置保存为预设(否)。
项目创建成功后,在项目文件夹的终端里运行如下命令。
# 运行项目
npm run serve
就可以在http://localhost:8080/访问到如下网页。
![64a5d513596633f6c12e63ce10fd840d.png](https://i-blog.csdnimg.cn/blog_migrate/2c3421c2dbf3e02a98ada62496dc9453.png)
修改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中引入