vue echart柱状图轮播
最后效果图
看来做酷炫的可视化大屏还是得上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(); }
效果如下，会动的图表，一下子就吸引了注意力。
