用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文件内容如下。