我的世界服务器网站建设,怎样运营网站,wordpress 栏目 主题,重庆活动轨迹公布一、布局 常见的大屏数据展示布局#xff0c;一般会将地图作为整个屏幕的背景#xff0c;在地图上以九宫格布局展示各类数据图表。实现这一效果可以使地图的z-index1,在地图上的图表等z-index1,下面会详细描述这种设计该如何实现#xff1a;
div stylewidth…一、布局 常见的大屏数据展示布局一般会将地图作为整个屏幕的背景在地图上以九宫格布局展示各类数据图表。实现这一效果可以使地图的z-index1,在地图上的图表等z-index1,下面会详细描述这种设计该如何实现
div stylewidth:100%;height:100%
!--最外层div要设置宽、高为100%--nav styleheight: 58px;width: 100%;position: absolute;top: 0;left: 0;z-index: 20;!--顶部导航绝对定位图层z-index21,浮于地图上方--/navdiv styleposition: absolute;width: 100%;height: calc(100% - 58px);top: 58px;left: 0;!--图表内容wrapper使用绝对定位使图表浮于地图上方不设置图层地图可以监听到鼠标--div styleposition: relative;z-index: 20;!--图表card,采用栅格化布局card--/div/divdiv stylewidth: 100%; height: 100%;!--地图--/div
/div二、Echarts图表自适应
图表div的宽度、高度不要写死可以使用百分比echart图表本身提供了一个resize的函数我们只需要监听页面的resize变化以后去执行echarts的resize方法即可重绘canvas
加载图表的组件graph.vue
templatediv styleheight: 100%;Spin fix v-showloadingIcon typeios-loading size18 classdemo-spin-icon-load/Icondiv加载中.../div/Spindiv :idid :datadata styleheight: 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函数重新绘制canvaswindow.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
templatediv classcontentdiv classv-card m-r-10 m-l-10h2 classcard-title图表标题/h2graph :idgraphId :datagraphOption stylewidth: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(){//获取图表数据配置图表参数setOptionthis.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三、Echarts自定义主题
大屏数据展示往往需要根据设计图自定义主题。Echarts自定义主题也十分简单操作如下 1.使用Echarts官网主题编辑器https://echarts.apache.org/zh/theme-builder.html自定义主题下载主题json。 2.注册主题(查看官网说明)
// 假设主题名称是 vintage
fetch(theme/vintage.json).then(r r.json()).then(theme {echarts.registerTheme(vintage, theme);var chart echarts.init(dom, vintage);})四、vue-baidu-map与vue-mapvgl
vue-baidu-mapvue-mapvgl基于 百度地图 JS API 开发百度地图mapvgl开发可实现常见的地图信息可视化基于WebGL的地理信息可视化库可以用来展示大量基于3D的地理信息点线面数据。解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。https://dafrok.github.io/vue-baidu-mapVue2.x (https://docs.guyixi.cn/vue-mapvgl) Vue3 (https://vue-mapvgl.guyixi.cn/)
如果要实现3D效果或者展示大数据量的地理信息数据可以考虑选择vue-mapvgl
五、定制个性化地图
在百度地图个性化地图编辑平台https://lbsyun.baidu.com/customv2/help.html定制主题下载主题JSON并引用 以vue-mapvgl为例
templatediv classbmap-page-containerel-bmap vidbmapDemo refbmapDemo :mapStyleV2mapStyle :tilt60 :heading0 :zoom10 :center[120.786975, 36.943199] classbmap-View/el-bmapdiv classtoolbarbutton clickgetMap()get map/button/div/div/templatestyle.bmap-demo {height: 300px;}/stylescript//引入下载的地图主题JSONimport styleJson from ../../assets/baiduMap/mapStyle.jsonexport default {name: baiduDemo,computed:{mapStyle:function(){let style {styleJson:styleJson}return style;},}}/script
六、常用组件库及工具
大屏数据展示组件库
datavhttp://datav.jiaminghi.com/
Echarts
官网https://echarts.apache.org/zh/index.htmlecharts示例网站 http://ppchart.com https://madeapie.com
百度地图
vue-baidu-map https://dafrok.github.io/vue-baidu-map|vue-mapvglVue2.x (https://docs.guyixi.cn/vue-mapvgl)vue-mapvglVue3 (https://vue-mapvgl.guyixi.cn/)
地图可视化工具类
百度地图个性化地图编辑平台阿里云地图选择器geoJson数据下载
