前言

🚀 基于 vue、datav、Echart 框架的大数据可视化（大屏展示）源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改， 可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。


文章目录

  • 前言
  • 一、Echart是什么
  • 二、ECharts入门教程
  • 三、如何在vue中引入echarts
  • 四、作品演示
  • 五、代码实现
  • router.js
  • main.js
  • App.vue
  • SvgIcon.vue
  • 五、更多干货


一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

三、如何在vue中引入echarts

1.先安装依赖

npm install echarts --save

2全局引入main.js中配置（不推荐使用，会导致包过大，冗余多）

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //挂载在原型，组件内使用直接this.$echarts调用

3.组件内按需引入 ( 推荐使用 )
这种方式很简单，在需要引入图表的组件引入,例如如下引入柱状图。

//在组件引入基本模板
let echarts = require("echarts/lib/echarts");
//在组件引入柱状图组件
require("echarts/lib/chart/bar");

4.全局引入为例，在组件中使用示例

<template>
	<div class="view-content">
		<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
	</div>
</template>

<script>
	export default {
		name: 'Echarts',
		data() {
			return {
			}
		},
		mounted() {
			this.drawLine();
		},
		methods: {
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('myChart'))
				// 绘制图表配置
				let option = {
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				};
				// 窗口大小自适应方案
				myChart.setOption(option);
				setTimeout(function() {
					window.onresize = function() {
						myChart.resize();
					}
				}, 200)
			}
		}
	}
</script>
<style lang="scss" scoped>
</style>

四、作品演示

java+vue模拟大数据可视化平台 vue大数据可视化框架_echarts

五、代码实现

router.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home';
import Ems from '@/views/Ems';

Vue.use(Router);

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/ems',
    name: 'Ems',
    component: Ems
  }
  ]
});

main.js

// The Vue build version to load with the `import` command
//  版权所有
import Vue from 'vue';
import App from './App';
import router from './router';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // element-ui的css

import 'normalize.css/normalize.css'; // 标准化css
import '@/styles/index.scss'; // 全局 css

import VCharts from 'v-charts';

Vue.config.productionTip = false;
Vue.use(ElementUI); //  引入
Vue.use(VCharts);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
});

App.vue

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<script>
/* const MENULIST = [] */

export default {
  name: 'App'
};
</script>

<style lang="scss">
//@import "normalize.css/normalize.css"; /* normalize */
//@import "./styles/index.scss";
</style>

SvgIcon.vue

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className;
      } else {
        return 'svg-icon';
      }
    }
  }
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>