数据大屏快递业务数据"/>
基于VUE + Echarts 实现可视化数据大屏快递业务数据
前言
🚀 基于 vue、datav、Echart 框架的大数据可视化(大屏展示)源码,基于VUE+Echarts 制作,实现大数据可视化。通过 vue 组件实现数据动态刷新渲染,内部图表可自由替换。部分图表使用 DataV 自带组件,可自由进行更改, 可以在此基础上重新开发。
本项目中使用的是echarts图表库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- router.js
- main.js
- App.vue
- 五、更多干货
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
router.js
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/page/index/index'
import login from '@/page/index/login2'//登录页面(测试页)
Vue.use(Router)
export default new Router({
//base:'/sxdataV/',//部署到tomcat
routes: [
{ //一级url路径
path: '/',
name: 'login',
component: login
},
{
path: '/index', //一级url路径
name: 'index',
redirect: '/index/mainview', //登录加载mainview
component: index,
props: (route)=>{ //接收参数
return {
id: route.query.id
}
},
children: [
{
path: 'villageindex', //二级url路径
name: 'villageindex',
component: () =>
import ( '@/page/village/villageindex') //路由跳转
},{
path: 'villageview', //二级url路径
name: 'villageview',
component: () =>
import ( '@/page/village/villageview') //路由跳转
}, {
path: 'mainview', //二级url路径
name: 'mainview',
component: () =>
import ( '@/page/broad/broadview')
}, {
path: 'Iotview', //二级url路径
name: 'Iotmain',
component: () =>
import ( '@/page/iot/iotview')
}]
},
]
})
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'
import Resource from 'vue-resource'
import './styles/common.scss';
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import ECharts from 'vue-echarts'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/radar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/chart/graph'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title.js'
import 'echarts-gl'
import 'babel-polyfill'
import axios from 'axios'
import FlatSurfaceShader from 'vue-flat-surface-shader'//磁贴背景组建
// 引入拖拽工具
import BaiduMap from 'vue-baidu-map'
import store from './store';
Vue.config.productionTip = false
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 */
ak: 'XU8pwlyFQKLtGHat8Fb98cbCh3ddCz2w'
})
Vueponent('v-chart', ECharts)
Vue.use(ElementUI)
Vue.use(Resource)
Vue.use(FlatSurfaceShader)
Vue.prototype.axios = axios;
/* eslint-disable no-new */
new Vue({
router,
store,
render: h => h(App) //渲染首视图
}).$mount('#app') //挂载
App.vue
<template>
<div id="app">
<router-view/> <!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 -->
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
更多推荐
基于VUE + Echarts 实现可视化数据大屏快递业务数据
发布评论