基于VUE + Echarts 实现可视化数据大屏智慧社区大屏

原创

@码出未来④-web网页设计 2022-11-06 03:01:39 ©著作权

文章标签 vue.js echarts javascript ecmascript 前端 文章分类 数据分析人工智能

©著作权归作者所有：来自51CTO博客作者@码出未来④-web网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

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

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

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

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

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

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

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

文章目录

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

一、Echart是什么

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

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

基于VUE + Echarts 实现可视化数据大屏智慧社区大屏_vue.js

基于VUE + Echarts 实现可视化数据大屏智慧社区大屏_前端_02

四、代码实现

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 App from './App'
import router from './router'
//引入elementui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import highcharts from 'highcharts'
import VueHighCharts from 'vue-highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts)
//引入公共的css
import './assets/styles/common/common.css'
//  
//引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.use(ElementUI)
Vue.config.productionTip = false

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

App.vue

<template>
  <div id="app">
    <Header v-show="$route.meta.showHeader"></Header>
    <router-view/>
  </div>
</template>

<script>
  import Header from '@/components/Header'
export default {
  name: 'App',
  components:{
    Header
  }
}
</script>

<style>

</style>