最后效果图

vue echart柱状图轮播_html


看来做酷炫的可视化大屏还是得上Echarts和D3。

Echarts文档地址

https://echarts.apache.org/zh/option.html

可供选择的配置超级多~

vue echart柱状图轮播_html_02

还是在Vue.js这个框架下敲代码。

首先需要安装Node.js以及NPM,然后安装Vue.js及Vue脚手架3.0。

这个在之前动态气泡图的文章中也提到过了。

  1. # 安装Vue.js
  2. npm install vue
  3. # 安装Vue-cli3脚手架
  4. npm install -g @vue/cli

命令行创建项目。

  1.  # 创建名为learn_echarts的项目
  2.  vue create learn_echarts

结果如下,选择自定义配置(第三个)。

vue echart柱状图轮播_css_03

选择Babel、Router、CSS Pre-processors及Linter / Formatter。

vue echart柱状图轮播_html_04

其中「Babel」负责JS和Vue模版语法解析,「Router」负责前端路由功能。

「CSS Pre-processors」负责样式文件的预编译,「Linter / Formatter」负责代码规范。

使用history模式来创建路由(是),CSS预处理模式(Less)。

vue echart柱状图轮播_html_05

ESLint处理模式(标准模式),ESLint提示(保存时),配置文件处理(放置在独立文件夹),是否将配置保存为预设(否)。

项目创建成功后,在项目文件夹的终端里运行如下命令。

  1.  # 运行项目
  2.  npm run serve

就可以在http://localhost:8080/访问到如下网页。

vue echart柱状图轮播_数据_06

修改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配置图表参数。

访问网页,效果如下。

vue echart柱状图轮播_html_07

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

数据采用的是昨天「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>


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

vue echart柱状图轮播_数据_08

在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],

},

]);

},

}


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

vue echart柱状图轮播_html_09

设置动态区域缩放。

//在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();

}



效果如下,会动的图表,一下子就吸引了注意力。

vue echart柱状图轮播_html