基于VUE + Echarts 实现可视化数据大屏监控系统可视化
发布时间
阅读量：
阅读量
前言
该方案采用Vue框架构建大数据可视化系统，并基于ECharts呈现效果（大屏展示）。代码采用Vue组件实现数据动态刷新渲染功能。系统支持自定义图表组件灵活配置（部分图表使用DataV自带组件）。在此基础上允许进一步开发与扩展。
本项目采用的工具是ECharts图表库。ECharts提供了多种常用图表类型包括折线 charts, bar charts, scatter charts, pie charts, 和 Kline charts, 专门用于统计分析的数据展示以及箱型分布 chart for statistical visualization. 此外还支持地理数据可视化的地图 heatmaps 和热力分布展示, 线路 diagram 可视化技术用于展示网络关系模型, 并且提供层次结构 treemap 和旭日 diagram 展示方法以呈现多维数据特征. 在BI分析中支持漏斗流程可视化仪表盘布局以及多种图表形式灵活组合.
文章目录
-
前言
-
一、Echart是什么
-
二、ECharts入门教程
-
三、作品演示
-
四、代码实现
-
core.vue
-
main.js
-
App.vue
-
五、更多干货
一、Echart是什么
ECharts作为一个基于JavaScript开发的开源数据可视化工具包，在PC端和移动端上能够顺畅运行；它支持IE8至11号-family浏览器、Chrome、Firefox以及Safari等主流 browsers；其底层架构依赖于矢量图形库ZRender；该库能够提供直观且交互丰富的数据可视化图表，并支持高度个性化定制
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
core.vue
<!-- Core --><template> <div class='core'> <left-side /> <Main /> <right-side /> </div></template><script>// 这里可以导入其他文件(比如：组件，工具js，第三方插件js，json文件，图片文件等等)// 例如：import 《组件名称》 from '《组件路径》';import Main from './Main'import LeftSide from './LeftSide'import RightSide from './RightSide'export default { // import引入的组件需要注入到对象中才能使用 components: { Main, LeftSide, RightSide }, data () { // 这里存放数据 return { } }, // 监听属性 类似于data概念 computed: {}, // 监控data中的数据变化 watch: {}, // 方法集合 methods: { }, // 生命周期 - 创建完成(可以访问当前this实例) created () { }, // 生命周期 - 挂载完成(可以访问DOM元素) mounted () { }, beforeCreate () { }, // 生命周期 - 创建之前 beforeMount () { }, // 生命周期 - 挂载之前 beforeUpdate () { }, // 生命周期 - 更新之前 updated () { }, // 生命周期 - 更新之后 beforeDestroy () { }, // 生命周期 - 销毁之前 destroyed () { }, // 生命周期 - 销毁完成 activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发}</script><style lang='scss' scoped>@import url(); 引入公共css类.core { display: flex; flex-shrink: 0; margin: 0 1.6vw;}</style>main.js
// .import Vue from 'vue'import App from './App.vue'import dataV from '@jiaminghi/data-view'import 'view-design/dist/styles/iview.css'import './assets/common.scss' // 公共样式import './assets/img/icon/iconfont.css' // iconimport echarts from 'echarts'import { Button, Table, Alert, Col, Row, Icon, CheckboxGroup, Checkbox, Spin, Message } from 'view-design'import store from './store'import axios from 'axios'axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '//localhost:8090/' : '/'// axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '//ev.sz-rcdxny1.com/' : '/'// 全局引入Vue.prototype.$echarts = echartsVue.prototype.$Message = MessageVue.prototype.$axios = axiosVue.component('Button', Button)Vue.component('Table', Table)Vue.component('Alert', Alert)Vue.component('Row', Row)Vue.component('i-col', Col)Vue.component('Icon', Icon)Vue.component('CheckboxGroup', CheckboxGroup)Vue.component('Checkbox', Checkbox)Vue.component('Spin', Spin)Vue.use(dataV)Vue.config.productionTip = falsenew Vue({ store, render: h => h(App)}).$mount('#app')App.vue
<template> <div id="app"> <Index /> </div></template><script>import Index from './view/index.vue'export default { name: 'app', components: { Index }}</script><style lang="scss">#app { font-family: "Microsoft YaHei", "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; height: 100%;}</style>全部评论 (0)
还没有任何评论哟~