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

运行项目发现错误，修改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文件。

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

这样我们就可以如下地址访问到信息了，即路由创建成功。

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中引入
// main.js中引入Vue.prototype.$echarts = window.echarts

如此便可在vue文件中使用Echarts。

修改Rank.vue文件内容如下。

通过init初始化图表对象，setOption配置图表参数。

访问网页，效果如下。

接下来就看本次的柱状轮播图是如何实现的吧！

数据采用的是「NBA」在各个省份的热度(百度指数)。

效果如下，广东不愧是中国篮球氛围最好的省份。

在updateChart函数中添加颜色列表，再对series里的itemStyle进行配置。

//颜色列表const colorArr = [ ["#0ba82c", "#4ff778"], ["#2e72bf", "#23e5e5"], ["#5052ee", "#ab6ee5"],];
//series配置itemStyle: { color: (arg) => { let targetArr = ; if (arg.data > 60000) { targetArr = colorArr[0]; } else if (arg.data > 30000) { targetArr = colorArr[1]; } else { targetArr = colorArr[2]; } return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: targetArr[0], }, { offset: 1, color: targetArr[1], }, ]); },}

效果如下，渐变色图表看起来也蛮好看的。

设置动态区域缩放。

//在data中设置全局变量startValue、endValue及定时器timeIddata { return { chartInstance: , allData: , startValue: 0, endValue: 9, timeId: , };}
//区域缩放动态设置dataZoom: { show: false, startValue: this.startValue, endValue: this.endValue,}
//在methods中添加定时器startInterval { if (this.timeId) { clearInterval(this.timeId); } this.timeId = setInterval( => { //设置循环，延时1s if (this.endValue > this.allData.length - 1) { (this.startValue = 0), (this.endValue = 9); } this.startValue++; this.endValue++; this.updateChart; }, 1000);}
//在mounted函数中添加函数mounted { this.initChart; this.getData; this.startInterval;}