• 基于VUE + Echarts 实现可视化数据大屏生产物联网监控智慧中心

    前言

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

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

    ⚽精彩专栏推荐👇🏻👇🏻👇🏻

    ❤ 【作者主页——🔥获取更多优质源码】

    ❤ 【1000套 毕设项目精品实战案例】

    ❤ 【 20套 VUE+Echarts 大数据可视化源码】

    ❤ 【150套 HTML+ Echarts大数据可视化源码 】

    文章目录

    一、Echart是什么

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

    二、ECharts入门教程

    5 分钟上手ECharts

    三、如何在vue中引入echarts

    1.先安装依赖

    npm install echarts --save

    • 1

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

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

    • 1
    • 2
    • 3

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

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

    • 1
    • 2
    • 3
    • 4

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    四、作品演示

    在这里插入图片描述

    五、代码实现

    main.js

    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'video.js/dist/video-js.css'

// 引入echarts
// import echarts from 'echarts'
// Vue.prototype.$echarts = echarts
import App from './App'
import router from './router'
// Copyright © 青 岛 研 锦 网 络 科 技 有 限 公 司    版权所有.
Vue.config.productionTip = false
Vue.use(ElementUI)

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




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    App.vue

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

<script>
export default {
  name: 'App',
  data () {
    return {
    }
  },
  components: {
  },
  methods: {
  }
}
script>

<style>
  body{
    padding: 0;
    margin: 0;
    width:1920px;
    height:1080px;
    position:relative;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .appContainer{
    position:absolute;
    left:0;
    bottom:0;
    right:0;
    top:0;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width:1920px;
    height:1080px;
    position:relative;
  }
  .table_conditions .el-input input{
     background-color:rgba(25,205,253,0.1)!important;
     border:1px solid rgba(25,205,253,1)!important;
     color:#fff;
     border-radius: 2px;
   }
  .table_page button,
  .table_page .el-pagination button:disabled{
    background: none;
    font-size:18px;
    color:rgba(255,255,255,0.5);
  }
  .table_page .el-pagination .btn-next,
  .table_page .el-pagination .btn-prev{
    background: none;
    color: rgba(25,205,253,1);
  }
  .table_page .table_page button, .table_page .el-pagination button:disabled{
    line-height: 48px;
  }
  .table_page .el-pagination button,
  .table_page .el-pagination span:not([class*=suffix]){
    height: 48px;
    line-height: 48px;
    font-size:18px;
  }
  .table_page .el-pagination__editor{
    margin:0 10px;
  }
  .table_page .el-pagination__jump{
    color: rgba(25,205,253,1);
    margin:0 24px;
  }
  .table_page .el-select .el-input .el-select__caret{
    color: rgba(25,205,235,1);
  }
  .table_page .el-select:hover .el-input__inner{
    border:1px solid rgba(25,205,235,1);
  }
  .table_page .el-input__inner{
    background:rgba(25,205,235,0.1);
    color:rgba(25,205,235,1);
    border:1px solid rgba(25,205,235,1);
  }
  .table_page .el-pagination{
    color:rgba(25,205,235,1);
  }
  .table_page .el-pager li{
    font-size:18px;
    height:48px;
    line-height: 48px;
    padding:0 14px;
    background: none;
  }
  .table_page .el-pager li.active{
    color:#fff;
  }
  .table_page .el-pagination__total{
    color:rgba(25,205,235,1);
  }
  .table_page .el-pagination__sizes .el-input .el-input__inner{
    font-size:16px;
  }

  .right_menu{
    width: 90px;
    position:absolute;
    right:0;
    top:170px;
  }
  .right_menu_item{
    color:rgba(35,205,253,1);
    border:1px solid rgba(35,205,253,1);
    height:44px;
    line-height: 44px;
    text-align: center;
    fonts-size:18px;
    margin-bottom:10px;
    position:relative;
    border-right:none;
    cursor: pointer;
    background:rgba(35,205,253,0.1);
  }
  .right_menu_item:hover,.right_menu_item.active{
    box-shadow: 0 0 10px rgba(35,205,253,0.5);
    color:#fff;
  }
style>





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138

    五、更多干货

    1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

    2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

    3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

  • 相关阅读:
    SpringSecurity Oauth2实战 - 04 自定义AuthProvider实现认证登录
    Android使用AudioTrack播放WAV音频文件
    说句实在话，90%项目经理都不会带团队
    Linux下如何操作寄存器
    免疫沉淀常见问题解答 | MedChemExpress
    DCDC直流低压升高压隔离电源模块（带短路保护）
    AD的PCB开窗+挖槽（Altium Designer）
    API 版本控制【 Eolink 翻译】
    Web前端-Vue2+Vue3基础入门到实战项目-Day4(组件的三大组成部分, 组件通信, 案例-组件版小黑记事本, 进阶语法)
    AI+视频技术助力保障校园安全，校园智能安防平台该如何建设？
  • 原文地址：https://blog.csdn.net/bigwhiteshark/article/details/126346828