用Echarts打造一个轮播图!
共 7352字,需浏览 15分钟
·
2020-10-15 03:02
点击上方“数据管道”,选择“置顶星标”公众号
干货福利,第一时间送达
最近,在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>
这样我们就可以如下地址访问到信息了,即路由创建成功。
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中引入