Echarts动态地图实现
2024-06-09 04:24:18
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><link rel="stylesheet" href="../../css/element.css"><link rel="stylesheet" href="../../css/base.css"><style>.el-divider__text {background: #eee;}</style>
</head>
<body>
<div id="wrapper" v-cloak><el-container><el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s"><div style="background-color: black; height: 60px; line-height: 60px; text-align: center;color: white; font-size: 20px;"><transition name="el-fade-in-linear"><span name="fade" v-show="!isCollapse"><a href="/page/end/index.html">X-Admin</a></span></transition></div><!-- 菜单 --><el-menu :default-openeds="['1']" style="border: none;" background-color="black" text-color="#fff" active-text-color="#ffd04b"default-active="home"class="el-menu-vertical-demo" :collapse="isCollapse"><a href="/page/end/index.html"><el-menu-item index="home"><i class="el-icon-data-line"></i><span slot="title">首页</span></el-menu-item></a><el-submenu index="1" v-if="user.permission && user.permission.length > 0"><template slot="title"><i class="el-icon-menu"></i><span slot="title">信息管理</span></template><a :href=`${item.path}` v-for="item in user.permission" :key="item.id"><el-menu-item :index="item.flag"><i class="el-icon-s-data"></i><span slot="title">{{item.name}}</span></el-menu-item></a></el-submenu></el-menu></el-aside><el-container><el-header style="background-color: black; line-height: 60px; color: white;"><el-row><el-col :span="1"><i style="font-size: 22px; cursor: pointer":class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="handleCollapse"></i></el-col><el-col :span="2" :offset="21" style="text-align: right"><span style="color: white; margin-right: 10px">{{user.username}}</span><el-dropdown><img :src=`/files/${user.avatar}`style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%"><el-dropdown-menu slot="dropdown"><a href="/page/end/person.html"style="display:inline-block; padding: 5px 0; width: 100px; text-align: center; color: black">个人信息</a><a @click="logout" href="#"style="display:block; width: 100px; text-align: center; color: black">退出</a></el-dropdown-menu></el-dropdown></el-col></el-row></el-header><!-- 主体区域 --><el-main><el-divider content-position="left">数据概览</el-divider><el-row :gutter="10" style="padding: 5px 0"><el-col :span="6"><el-card style="padding: 10px"><div style="display: inline-block; padding-right: 20px; vertical-align: middle;"><img src="../../file/home/home-01.png" style="width: 60px"></div><div style="display: inline-block; padding-left: 40px; vertical-align: middle;"><div style="color: #455a64; font-size: 24px; padding-bottom: 5px">1988</div><div style="color: #99abb4;">营销额</div></div></el-card></el-col><el-col :span="6"><el-card style="padding: 10px"><div style="display: inline-block; padding-right: 20px; vertical-align: middle;"><img src="../../file/home/home-02.png" style="width: 60px"></div><div style="display: inline-block; padding-left: 40px; vertical-align: middle;"><div style="color: #455a64; font-size: 24px; padding-bottom: 5px">1988</div><div style="color: #99abb4;">商品</div></div></el-card></el-col><el-col :span="6"><el-card style="padding: 10px"><div style="display: inline-block; padding-right: 20px; vertical-align: middle;"><img src="../../file/home/home-03.png" style="width: 60px"></div><div style="display: inline-block; padding-left: 40px; vertical-align: middle;"><div style="color: #455a64; font-size: 24px; padding-bottom: 5px">1988</div><div style="color: #99abb4;">订单</div></div></el-card></el-col><el-col :span="6"><el-card style="padding: 10px"><div style="display: inline-block; padding-right: 20px; vertical-align: middle;"><img src="../../file/home/home-04.png" style="width: 60px"></div><div style="display: inline-block; padding-left: 40px; vertical-align: middle;"><div style="color: #455a64; font-size: 24px; padding-bottom: 5px">1988</div><div style="color: #99abb4;">用户</div></div></el-card></el-col></el-row><el-row :gutter="10" style="padding: 5px 0"><el-col :span="12"><el-card><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px; margin: 0 auto"></div></el-card></el-col><el-col :span="12"><el-card><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="map" style="width: 600px;height:400px; margin: 0 auto"></div></el-card></el-col></el-row></el-main></el-container></el-container>
</div><script src="../../js/echarts.min.js"></script>
<script src="../../js/china.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script><script>let pieOption = {"title":{"text":"商品销量统计"},"legend":{"x":"left","y":"center","orient":"vertical","data":["服饰","电子产品","零食","体育用品"]},"tooltip":{"show":true},"xAxis":null,"yAxis":null,"series":[{"name":"用户比例","type":"pie","radius":"55%","data":[{"name":"服饰","value":589},{"name":"电子产品","value":1874},{"name":"零食","value":995},{"name":"体育用品","value":249}]}]}let mapOption = {title : {text: '用户地域分布',subtext: '',left: 'center'},tooltip : {trigger: 'item'},legend: {orient: 'vertical',left: 'left',data:['用户']},visualMap: {min: 0,max: 2500,left: 'left',top: 'bottom',text:['高','低'], // 文本，默认为数值文本calculable : true},toolbox: {show: true,orient : 'vertical',left: 'right',top: 'center',feature : {mark : {show: true},dataView : {show: true, readOnly: false},restore : {show: true},saveAsImage : {show: true}}},series : [{name: '用户',type: 'map',mapType: 'china',roam: false,label: {normal: {show: false},emphasis: {show: true}},data:[{name: '北京',value: Math.round(Math.random()*1000)},{name: '天津',value: Math.round(Math.random()*1000)},{name: '上海',value: Math.round(Math.random()*1000)},{name: '重庆',value: Math.round(Math.random()*1000)},{name: '河北',value: Math.round(Math.random()*1000)},{name: '河南',value: Math.round(Math.random()*1000)},{name: '云南',value: Math.round(Math.random()*1000)},{name: '辽宁',value: Math.round(Math.random()*1000)},{name: '黑龙江',value: Math.round(Math.random()*1000)},{name: '湖南',value: Math.round(Math.random()*1000)},{name: '安徽',value: Math.round(Math.random()*1000)},{name: '山东',value: Math.round(Math.random()*1000)},{name: '新疆',value: Math.round(Math.random()*1000)},{name: '江苏',value: Math.round(Math.random()*1000)},{name: '浙江',value: Math.round(Math.random()*1000)},{name: '江西',value: Math.round(Math.random()*1000)},{name: '湖北',value: Math.round(Math.random()*1000)},{name: '广西',value: Math.round(Math.random()*1000)},{name: '甘肃',value: Math.round(Math.random()*1000)},{name: '山西',value: Math.round(Math.random()*1000)},{name: '内蒙古',value: Math.round(Math.random()*1000)},{name: '陕西',value: Math.round(Math.random()*1000)},{name: '吉林',value: Math.round(Math.random()*1000)},{name: '福建',value: Math.round(Math.random()*1000)},{name: '贵州',value: Math.round(Math.random()*1000)},{name: '广东',value: Math.round(Math.random()*1000)},{name: '青海',value: Math.round(Math.random()*1000)},{name: '西藏',value: Math.round(Math.random()*1000)},{name: '四川',value: Math.round(Math.random()*1000)},{name: '宁夏',value: Math.round(Math.random()*1000)},{name: '海南',value: Math.round(Math.random()*1000)},{name: '台湾',value: Math.round(Math.random()*1000)},{name: '香港',value: Math.round(Math.random()*1000)},{name: '澳门',value: Math.round(Math.random()*1000)}]}]};new Vue({el: "#wrapper",data: {user: {},tableData: [],pageNum: 1,pageSize: 10,total: 0,dialogFormVisible: false,entity: {},isCollapse: false},mounted() {this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};this.loadEcharts();},methods: {loadEcharts() {// 基于准备好的dom，初始化echarts实例let myChart = echarts.init(document.getElementById('main'));// 使用刚指定的配置项和数据显示图表。myChart.setOption(pieOption);// 基于准备好的dom，初始化echarts实例let mapChart = echarts.init(document.getElementById('map'));// 使用刚指定的配置项和数据显示图表。mapChart.setOption(mapOption);},handleCollapse() {this.isCollapse = !this.isCollapse;},logout() {$.get("/user/logout");sessionStorage.removeItem("user");location.href = "/page/end/login.html";}}})
</script>
</body>
</html>
Echarts动态地图实现相关推荐
- echarts之静态与动态地图
这里写自定义目录标题 工作中多次遇到数据可视化的开发,记录一下. 地图效果: 静态页面: <!DOCTYPE html> <head><style>#chartMa ...
- Echarts 实现动态地图
<html lang="en"> <head> <meta charset="utf-8"> <title>地图 ...
- 分享一种echarts的三维动态地图效果
内容概要: 使用echarts地图实现的三维立体动态风格的地图效果,地图边界还带有动态流动线条效果. 目标人群: 前端开发工程师,大屏可视化开发人员. 使用场景: 地图三维立体可视化展示效果. 实现效 ...
- 基于ArcGIS Echarts制作单个城市人口流动动态地图
代码如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
- Echart佛山五区地图-动态地图-江西地图
Echart佛山五区地图-动态地图-江西地图 佛山地区Echart地图 1. 下载 2. 运行 江西地图 1. 在线调试 佛山地区Echart地图 1. 下载 使用百度Echart编写的佛山五区地图. ...
- echarts r 地图_用R与Stata绘制地图，让文稿shinly起来
有时候,我们在写文稿时,可能会涉及到数据的"统计制图"这一个环节.比如我们会遇到这样一批数据集,绘制全国31个省人均GDP的空间分布特征,以探索不同地区的经济发展水平差异. 这时候 ...
- R语言可视化——REmap动态地图
作者简介Introduction 杜雨:EasyCharts团队成员,R语言中文社区专栏作者. 兴趣方向为:Excel商务图表,R语言数据可视化,地理信息数据可视化. 个人公众号:数据小魔方(微信ID ...
- echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染 新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
- r语言echarts画箱线图_echarts学习笔记之箱线图的分析与绘制详解
一.箱线图 box-plot 箱线图(boxplot)也称箱须图(box-whisker plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布 ...
最新文章
- Python设计模式-职责链模式
- FrostSulliven最新发布引领全球增长的60大技术
- 山西五台警方通报“男子强拽女学生”：嫌疑人被刑拘
- 广度优先搜索（BreadthFirstSearch） 迪克斯特拉算法 （Dijkstra's algorithm）
- arcgis栅格数据平滑_基于ArcGIS对栅格进行平滑处理
- shanghai road map
- C# socket编程第二篇
- Visual Studio Code 常用插件整理
- 适合程序员的画图工具
- Python--JSON基础
- java中二进制怎么说_面试常用：说清楚Java中synchronized和volatile的区别
- Kubernetes（十七） 基于NFS的动态存储申请
- bootstrap轮播图 原点变为方块_JS实现无缝切换轮播图(自动+手动)
- maven项目引入新依赖问题
- trunk与access的区别
- Android百度地图之定位图层
- 如何在本地搭建FTP服务器以及搭建后的用途
- 推荐几个比较好的日语翻译网站还有软件（我自己还没看过）
- VS2008 MFC类库精讲:使用MFC V9.0类库及新版Office Fluent UI实现CAD系统
- UG NX 8.5有限元分析入门与实例精讲（PPT、视频、模型）