vue可视化大屏数据展示经验分享

一、布局

常见的大屏数据展示布局，一般会将地图作为整个屏幕的背景，在地图上以九宫格布局展示各类数据图表。实现这一效果可以使地图的z-index=1,在地图上的图表等z-index>1,下面会详细描述这种设计该如何实现：

<div style="width:100%;height:100%">

	<nav style="height: 58px;width: 100%;position: absolute;top: 0;left: 0;z-index: 20;">
		
	nav>
	<div style="position: absolute;width: 100%;height: calc(100% - 58px);top: 58px;left: 0;">
		
		<div style="position: relative;z-index: 20;">
		
		div>
	div>
	<div style="width: 100%; height: 100%;">
		
	div>
div>

二、图表自适应

1. 图表div的宽度、高度不要写死，可以使用百分比
2. echart图表本身提供了一个resize的函数，我们只需要监听页面的resize变化以后，去执行echarts的resize方法即可重绘canvas

加载图表的组件graph.vue

<template>
    <div style="height: 100%;">
        <Spin fix v-show="loading">
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load">Icon>
                <div>加载中...div>
        Spin>
        <div :id="id" :data="data" style="height: 100%;">div>
    div>
template>
<script>
//引入自定义主题rainbow.json
import rainbow from '../../assets/rainbow.json'
export default {
    props:["id","data"],
    data(){
        return{
            graph:null,
            loading:true,
        }
    },
    methods:{
        drawGraph(id,data){
            let _this = this;
            let myChart = document.getElementById(id);
            //自定义主题
            this.graph = this.$echarts.init(myChart,'rainbow');
            this.graph.setOption(data);
            this.loading = false;
            //浏览器窗口大小变化时触发echarts的resize函数，重新绘制canvas
            window.addEventListener("resize",function(){
                _this.graph.resize();
            });
        }
    },
    mounted(){
        this.$echarts.registerTheme("rainbow",rainbow);
        
        this.drawGraph(this.id,this.data);
    },
    beforeDestroy(){
        if(this.graph) this.graph.clear();
    },
    watch:{
        data:{
            handler(newValue,oldValue){
                this.drawGraph(this.id,newValue);
            },
            deep:true
        }
    }
}
script>
<style>
.demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
style>

graph.vue的使用
demo.vue

<template>
    <div class="content">
        <div class="v-card m-r-10 m-l-10">
            <h2 class="card-title">图表标题h2>
             <graph :id="'graphId'" :data="graphOption" style="width:100%;height:100%">graph>    
       div>
    div>
template>
<script>
import graph from '../../my-components/graph.vue'
export default {
        name: 'demo',
        components:{
            graph,
        },
        data(){
        	graphOption:{}
        },
        methods: (){
        	initDemoChart(){
        	//获取图表数据，配置图表参数setOption
        		this.graphOption={
			        title: {
			          text: 'ECharts 入门示例'
			        },
			        tooltip: {},
			        legend: {
			          data: ['销量']
			        },
			        xAxis: {
			          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
			        },
			        yAxis: {},
			        series: [
			          {
			            name: '销量',
			            type: 'bar',
			            data: [5, 20, 36, 10, 10, 20]
			          }
			        ]
			     };
        	}
        },
        mounted () {
        	this.initDemoChart();
        },
        
        
}
script>

四、常用组件库

1. Vue 大屏数据展示组件库：http://datav.jiaminghi.com/
2. 可视化图表库：https://echarts.apache.org/zh/index.html
3. echarts示例网站：
   http://ppchart.com
   https://madeapie.com
4. 百度地图GL的地图组件：https://vue-bmap-gl.guyixi.cn/