最后效果图
看来做酷炫的可视化大屏还是得上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文件内容如下。
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style lang="less">
</style>
运行项目发现错误，修改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文件。
<template>
<div class="com-container">
<div class="com-chart" ref="rank_ref">我是rank组件</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="less" scoped></style>
在views文件夹下删除About.vue及Home.vue文件，添加RankPage.vue文件。
<template>
<div class="com-page">
<rank></rank>
</div>
</template>
<script>
import Rank from "../components/Rank";
export default {
data() {
return {};
},
components: {
Rank,
},
};
</script>
<style lang="less" scoped>
</style>
这样我们就可以如下地址访问到信息了，即路由创建成功。
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中引入
<script src="static/lib/echarts.min.js"></script>
// main.js中引入
Vue.prototype.$echarts = window.echarts
如此便可在vue文件中使用Echarts。
修改Rank.vue文件内容如下。
<template>
<div class="com-container">
<div class="com-chart" ref="rank_ref"></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.drawChart();
},
methods: {
drawChart() {
let myChart = this.$echarts.init(this.$refs.rank_ref);
var option = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
myChart.setOption(option);
},
},
};
</script>
<style lang="less" scoped></style>
通过init初始化图表对象，setOption配置图表参数。
访问网页，效果如下。
接下来就看本次的柱状轮播图是如何实现的吧！
数据采用的是昨天「NBA」在各个省份的热度(百度指数)。
<template>
<div class="com-container">
<div class="com-chart" ref="rank_ref"></div>
</div>
</template>
<script>
export default {
data() {
return {
chartInstance: null,
allData: null,
};
},
mounted() {
this.initChart();
this.getData();
},
methods: {
//初始化图表
initChart() {
this.chartInstance = this.$echarts.init(this.$refs.rank_ref, "dark");
//图表初始配置
const initOption = {
title: {
text: "各省热度排行",
top: "3%",
left: "3%",
},
grid: {
top: "20%",
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true,
},
tooltip: {
show: true,
},
xAxis: {
type: "category",
},
yAxis: {
type: "value",
splitLine: {
//网格线
show: false,
},
},
series: [
{
type: "bar",
},
],
};
this.chartInstance.setOption(initOption);
},
getData() {
this.allData = [
{ name: "山东", value: 84737 },
{ name: "贵州", value: 20808 },
{ name: "江西", value: 31883 },
{ name: "重庆", value: 26070 },
{ name: "内蒙古", value: 16308 },
{ name: "湖北", value: 43956 },
{ name: "辽宁", value: 41150 },
{ name: "湖南", value: 44386 },
{ name: "福建", value: 51290 },
{ name: "上海", value: 58547 },
{ name: "北京", value: 75911 },
{ name: "广西", value: 28682 },
{ name: "广东", value: 204698 },
{ name: "四川", value: 61059 },
{ name: "云南", value: 27707 },
{ name: "江苏", value: 109264 },
{ name: "浙江", value: 115958 },
{ name: "青海", value: 3423 },
{ name: "宁夏", value: 4742 },
{ name: "河北", value: 41415 },
{ name: "黑龙江", value: 26215 },
{ name: "吉林", value: 20592 },
{ name: "天津", value: 19235 },
{ name: "陕西", value: 32019 },
{ name: "甘肃", value: 13294 },
{ name: "新疆", value: 10461 },
{ name: "河南", value: 54371 },
{ name: "安徽", value: 41701 },
{ name: "山西", value: 24752 },
{ name: "海南", value: 9279 },
{ name: "台湾", value: 587 },
{ name: "西藏", value: 1790 },
{ name: "香港", value: 1655 },
{ name: "澳门", value: 1014 },
];
//排序
this.allData.sort((a, b) => {
return b.value - a.value;
});
//更新图表
this.updateChart();
},
updateChart() {
//横坐标数据(省份)
const provinceArr = this.allData.map((item) => {
return item.name;
});
//纵坐标数据(数值)
const valueArr = this.allData.map((item) => {
return item.value;
});
//更新数据
const dataOption = {
xAxis: {
data: provinceArr,
},
series: [
{
data: valueArr,
},
],
};
this.chartInstance.setOption(dataOption);
},
},
};
</script>
<style lang="less" scoped></style>
效果如下，广东不愧是中国篮球氛围最好的省份。
在updateChart函数中添加颜色列表，再对series里的itemStyle进行配置。
//颜色列表
const colorArr = [
["#0ba82c", "#4ff778"],
["#2e72bf", "#23e5e5"],
["#5052ee", "#ab6ee5"],
];
//series配置
itemStyle: {
color: (arg) => {
let targetArr = null;
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及定时器timeId
data() {
return {
chartInstance: null,
allData: null,
startValue: 0,
endValue: 9,
timeId: null,
};
}
//区域缩放动态设置
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();
}
效果如下，会动的图表，一下子就吸引了注意力。
