用Echarts打造一个轮播图！

点击上方“数据管道”，选择“置顶星标”公众号

干货福利，第一时间送达

最近，在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文件内容如下。