常见的大屏数据展示布局,一般会将地图作为整个屏幕的背景,在地图上以九宫格布局展示各类数据图表。实现这一效果可以使地图的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>
加载图表的组件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>