前言
🚀 基于 vue、datav、Echart 框架的大数据可视化(大屏展示)源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- core.vue
- main.js
- App.vue
- 五、更多干货
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 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>
