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

前言

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

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

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

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

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

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

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

文章目录

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

一、Echart是什么

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

二、ECharts入门教程

5 分钟上手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>      

四、作品演示

五、代码实现

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: '<App/>'
})      

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>      

五、更多干货