echarts地图，柱状图，折线图实战

1.地图

 

<template><div style="height: 100%;" class="cantainerBox"><div class="top"><div class="leftTop"><span class="firstSpan">推广进度</span><div>省份选择：<el-select v-model="valueProvinces" placeholder="请选择"><el-optionv-for="item in optionsProvince":key="item.value":label="item.label":value="item.value"></el-option></el-select></div><div class="cityStyle">城市选择：<el-select v-model="valueCity" placeholder="请选择"><el-optionv-for="item in optionsCity":key="item.value":label="item.name":value="item.value"></el-option></el-select></div></div><span class="rightLeft">查看更多</span></div><div class="container"><div id="echart_map" ref="echart_map" :style="{'width': innerWidth,'height': innerHeight}"></div><div class="center"><div v-for="(item,index) in showColorDataPrint" :key="item.name" class="centerBox"><div :style="getClass(item)"></div><div class="content">{{ 'top.' }}{{ index + 1 }}</div></div>   </div><div class="right"><PillarChart/><!-- <div id="echart_pillar" ref="echart_pillar" :style="{'width': '100%','height': '100%'}"></div> --></div></div><div></div></div></template>
<script>const henanmap = require("../../../../echartData/henan.json")
const chongqingmap = require("../../../../echartData/chongqing.json")
const neimengmap = require("../../../../echartData/neimeng.json")
const china = require("../../../../echartData/china.json")
import showColorData from '../../../../echartData/showColorData.js'
import getColorByValue from './colorChoice.js'
import PillarChart from './PillarChart.vue'export default{data(){return{myChart:null,optionsProvince: [{value: '',label: '全部'}, {value: '1',label: '河南'}, {value: '2',label: '内蒙古'}, {value: '3',label: '重庆'}],fixedCoordinates : [  {name: '地点1', coord: [116.405285, 39.904989]}, // 北京的经纬度作为示例  {name: '地点2', coord: [121.473701, 31.230416]}  // 上海的经纬度作为示例  // 添加更多地点...  ],optionsCity: [],valueProvinces: '',valueCity: '',showValue: '',choiceColorData:[],dataColor:showColorData,showColorDataPrint:[],// 调一下样式innerWidth:window.innerWidth<=1920? '40%':'40%',innerHeight:window.innerWidth<=1920? '100%':'100%',// 调一下样式innerWidth1:window.innerWidth<=1920? '100%':'100%',innerHeight1:window.innerWidth<=1920? '100%':'100%',}},components:{PillarChart},mounted(){// 页面第一次加载展示中国地图this.showValue = 'china'// 这是相关模拟每个地市有多少站点，value就是站点数this.choiceColorData = this.dataColor['china']// 获取相关数据对应的颜色this.showColorDataPrint= this.topTenData(this.choiceColorData)// 模拟相关的各个省份的地理数据localStorage.setItem('henan',JSON.stringify(henanmap))localStorage.setItem('chongqing',JSON.stringify(chongqingmap))localStorage.setItem('neimeng',JSON.stringify(neimengmap))localStorage.setItem('china',JSON.stringify(china))// 挂载地图this.myChartMap = this.$echarts.init(this.$refs.echart_map)// 初始化地图this.initMap(this.showValue)// 挂载地图// this.myChartPillar = this.$echarts.init(this.$refs.echart_pillar)// 初始化地图// this.initPillar()// 样式自适应window.addEventListener('resize', this.handleResize);},beforeDestroy() {window.removeEventListener('resize', this.handleResize);if (this.myChartMap) {this.myChartMap.dispose(); // 清理图表实例}},watch:{'valueProvinces':{handler(val,oldVal){console.log('val',val);switch(val){case '':this.showValue = 'china';this.choiceColorData = this.dataColor[this.showValue]// 获取相关数据对应的颜色this.showColorDataPrint= this.topTenData(this.choiceColorData)this.initMap(this.showValue)break;case '1':this.showValue = 'henan';this.choiceColorData = this.dataColor[this.showValue]this.optionsCity = this.dataColor[this.showValue]// 获取相关数据对应的颜色this.showColorDataPrint= this.topTenData(this.choiceColorData)this.initMap(this.showValue)break;case '2':this.showValue = 'neimeng';this.choiceColorData = this.dataColor[this.showValue]this.optionsCity = this.dataColor[this.showValue]// 获取相关数据对应的颜色this.showColorDataPrint= this.topTenData(this.choiceColorData)this.initMap(this.showValue)break;case '3':this.showValue = 'chongqing';this.choiceColorData = this.dataColor[this.showValue]this.optionsCity = this.dataColor[this.showValue]// 获取相关数据对应的颜色this.showColorDataPrint= this.topTenData(this.choiceColorData)this.initMap(this.showValue)break;default:break;}}}},methods:{// 自适应handleResize() {if (this.myChartMap) {setTimeout(() => {this.myChartMap.resize();},500)}},// 地图右侧图需要展示10个小方格，给动态样式getClass(item){let styleItem = {width:'10px',height:'10px',background:item.itemStyle.color}return styleItem},// 对于所有数据进行排序整理出来前10topTenData(arr){return  arr.sort((a, b) => b.value - a.value) // 从大到小排序  .slice(0, 10) // 取前10个元素  .map(item => ({name:item.name,value:item.value,itemStyle:{color:getColorByValue(item.value)}}))},// 初始化地图initMap(showValue){this.$echarts.registerMap('GX',localStorage.getItem(showValue?showValue:'china'))var options = {visualMap:{// 不显示颜色条show:false},tooltip:{},series:[{type:'map',map:'GX',label:{show:false},// 添加markPoint来显示小红旗  markPoint: {  symbol: `image://${require('../../../../assets/saas/hongqi.png')}`, // 使用小红旗符号  symbolSize: 50, // 调整符号大小  itemStyle: {  color: 'red', // 小红旗的颜色  borderColor: '#fff', // 边框颜色  borderWidth: 2 // 边框宽度  },  data: this.fixedCoordinates.map(coord => ({  name: coord.name,  coord: coord.coord,  value: '' // 这个值在地图上不显示，但可以用于排序或其他目的  }))  },data:this.choiceColorData.map(item => ({name:item.name,value:item.value,itemStyle:{color:getColorByValue(item.value)}}))}],}this.myChartMap.setOption(options);}}
}
</script>
<style scoped>
.cantainerBox{height: 100%;width: 100%;display: flex;justify-content: flex-start;flex-direction: column;background: #FFFFFF;border: 1px solid rgba(235,235,235,1);border-radius: 8px;.top{width: 100%;height: 54px!important;padding-top: 10px;padding-left: 10px;padding-right: 10px;box-sizing: border-box;margin-bottom: 0!important;background-image: linear-gradient(180deg, #F8FFFF 0%, rgba(248,255,255,0.20) 99%);border-radius: 8px 8px 0px 0px;display: flex;justify-content: flex-start;.leftTop{display: flex;justify-content: flex-start;.firstSpan{margin-top: 6px;font-family: PingFangSC-Semibold;font-size: 16px;color: #2C2C32;/* line-height: 16px; */font-weight: 600;margin-right: 80px;}.cityStyle{margin-left: 40px;}}.rightLeft{font-family: PingFangSC-Regular;font-size: 14px;color: #3077F9;line-height: 14px;font-weight: 400;}}.container{height: 90%;flex-grow: 1;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;display: flex;justify-content: flex-start;#echart_map{/* width: 40%; *//* height: 100%!important; */background: #F7FAFF;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}.center{padding-left: 150px;box-sizing: border-box;display: flex;justify-content: flex-start;flex-direction: column;width: 20%;height: 100%;background: #F7FAFF;border-top-right-radius: 4px;border-bottom-right-radius: 4px;padding-top: 20px;.centerBox{display: flex;justify-content: flex-start;flex-grow: 1;.content{font-family: PingFangSC-Regular;font-size: 12px;color: #454865;line-height: 9px;margin-left: 10px;}}}.right{width: 40%;/* height: 90%; */height: 100%;padding-left: 50px!important;}}
}/* #echart_pillar{height: 100%;width: 100%; 
}  */</style>

2.柱状图

<template><div id="echart_pillar" ref="echart_pillar" :style="{'height': '100%'}"></div>
</template><script>
import * as echarts from 'echarts'
export default{mounted(){// 挂载地图this.myChartPillar = this.$echarts.init(this.$refs.echart_pillar)// 初始化地图this.initPillar()window.addEventListener('resize', this.handleResize);},beforeDestroy() {window.removeEventListener('resize', this.handleResize);if (this.myChartPillar) {this.myChartPillar.dispose()}},methods:{// 自适应handleResize() {if (this.myChartPillar) {setTimeout(() => {this.myChartPillar.resize();},300)}},initPillar(){var option = {  title: {  text: 'TOP10,已覆盖12省29市'  },  tooltip: {},  xAxis: {type: 'value',  boundaryGap: [0, 0.01],// 隐藏网格splitLine: { show: false },// 隐藏数值标签axisLabel: {  show: false // 隐藏x轴数值标签  },axisLine: {  show: true, // 隐藏y轴轴线（如果不需要的话),lineStyle:{color:'rgba(235,235,235,1)',type:'solid',width:2}}},  yAxis: {  type: 'category',  data: ['河南', '河北', '山东', '四川', '重庆','内蒙', '西藏', '江苏', '广州', '广西'] ,splitLine: { show: false },axisLine: {  show: true, // 隐藏y轴轴线（如果不需要的话）  lineStyle:{color:'rgba(235,235,235,1)',type:'solid',width:2}},axisLabel:{fontFamily: 'PingFangSC-Regular',fontSize: '12px',color: '#454865',fontweight: 400,}},  series: [{  name: '销量',  type: 'bar',  data: [5, 20, 36, 10, 10,6,8,15,20,23],itemStyle: {normal: {  color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[  { offset: 0, color: '#3A7FFF' }, // 起始颜色和位置  { offset: 1, color: '#4FE3A8' }  // 结束颜色和位置  ]  )  }  },label: {  show: true, // 显示标签  position: 'right', // 标签位置在柱子顶部  formatter: (val) => {return val.value + '个'}, // 标签内容格式，{c}表示销量值  color: 'black', // 标签文字颜色（可选）  fontSize: 12, // 标签文字大小（可选）fontFamily: 'PingFangSC-Regular',color: '#9296B1',fontWeight: '400' }  }]  };  // 使用刚指定的配置项和数据显示图表。  this.myChartPillar.setOption(option);  }}
}
</script>

 3.折线图

<template><div class="containerLine"><div class="tops"><span>营销统计</span></div><div id="echart_line" ref="echart_line" :style="{'width': '100%','height': '90%'}"></div></div>
</template>
<script>
export default{mounted(){// 挂载地图this.myChartLine = this.$echarts.init(this.$refs.echart_line)// 初始化地图this.initLine()// 样式自适应window.addEventListener('resize', this.handleResize);},beforeDestroy() {window.removeEventListener('resize', this.handleResize);if (this.myChartLine) {this.myChartLine.dispose(); // 清理图表实例// this.myChartPillar.dispose()}},methods:{// 自适应handleResize() {if (this.myChartLine) {setTimeout(() => {this.myChartLine.resize();// this.myChartPillar.resize();},1)}},initLine(){var option = {xAxis: {type: 'category',data: ['1月', '2月', '3月','4月', '5月', '6月','7月', '8月', '9月','10月', '11月', '12月'],axisLine: {  show: true, // 隐藏y轴轴线（如果不需要的话),lineStyle:{color:'rgba(235,235,235,1)',type:'solid',width:2}},axisLabel:{fontFamily: 'PingFangSC-Regular',fontSize: '14px',color: '#9296B1',fontWeight: 400,}},yAxis: {type: 'value',splitLine: { show: true},axisTick: {  show: false // 显示刻度线  },axisLine: {  show: true, // 隐藏y轴轴线（如果不需要的话）  lineStyle:{color:'rgba(235,235,235,1)',type:'solid',width:2}},axisLabel:{fontFamily: 'PingFangSC-Regular',fontSize: '14px',color: '#9296B1',fontwWight: 400,},min:0,max:1500},grid: {  left: '3%', // 调整左边距  right: '3%', // 调整右边距  // 可以根据需要调整top和bottom属性来控制上下边距  },  series: [{data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true,areaStyle: {  color: {  type: 'linear',  x: 0,  y: 0,  x2: 0,  y2: 1,  colorStops: [{  offset: 0, color: 'rgba(255, 255, 255, 0)' // 透明  }, {  offset: 1, color: 'rgba(255, 214, 122, 0.8)' // 黄色半透明  }],  global: false // 缺省为 false  }  }  }]};// 使用刚指定的配置项和数据显示图表。  this.myChartLine.setOption(option);  }}
}
</script>
<style scoped>
.containerLine{width: 100%;height: 100%;.tops{background-image: linear-gradient(180deg, #F8FFFF 0%, rgba(248,255,255,0.20) 99%);border-radius: 8px 8px 0px 0px;height: 40px;line-height: 40px;span{margin-left: 26px;font-family: PingFangSC-Semibold;font-size: 16px;color: #2C2C32;line-height: 16px;font-weight: 600;}}
}
</style>

 工作之余做的小样式，挺好看！希望大家喜欢！地理数据可以直接去阿里官网下载！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/58817.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HTB：Cicada[WriteUP]

HTB：Cicada[WriteUP]

目录 连接至HTB服务器并启动靶机 使用nmap对靶机进行开放端口扫描 使用nmap对靶机开放端口进行脚本、服务信息扫描 首先尝试空密码连接靶机SMB服务 由于不知道账户名&#xff0c;这里我们使用crackmapexec对smb服务进行用户爆破 通过该账户连接至靶机SMB服务器提取敏感信…
阅读更多...
张嘉译王海燕婚姻告急？17年长跑终落幕，真相究竟如何？

张嘉译王海燕婚姻告急？17年长跑终落幕，真相究竟如何？

娱乐圈又一对金童玉女分道扬镳&#xff1f;在这个瞬息万变的娱乐圈里&#xff0c;爱情似乎总是来得快去得也快。近日&#xff0c;一则关于实力派演员张嘉译与妻子王海燕结束17年婚姻长跑的消息&#xff0c;如同一颗重标题&#xff1a;&#x1f494;张嘉译王海燕婚姻告急&#x…
阅读更多...
我的电视 左侧列表内置版 | 非常高清，频道丰富的电视直播应用

我的电视 左侧列表内置版 | 非常高清，频道丰富的电视直播应用

我的电视是一款专注于电视直播的应用程序&#xff0c;提供丰富且全面的电视频道&#xff0c;包括央视及各大卫视。无论您是想看新闻、体育、电影还是综艺节目&#xff0c;都可以在这里找到。应用支持高清画质播放&#xff0c;确保流畅无卡顿的观看体验。简洁的界面设计和智能推…
阅读更多...
Conmi的正确答案——在Kibana中进入Elasticsearch的索引管理页面

Conmi的正确答案——在Kibana中进入Elasticsearch的索引管理页面

Elasticsearch版本&#xff1a;7.17.25 Kibana版本&#xff1a;7.17.25 注&#xff1a;索引即类似mysql的表。 0、进入首页 1、未创建任何“索引模式”时&#xff1a; 1.1、点击左边的三横菜单&#xff1b; 1.2、点击“Discover”&#xff0c;进入“发现”页面&#xff1b; 2…
阅读更多...
在线体验Sketch中文版，免费下载即刻上手！

在线体验Sketch中文版，免费下载即刻上手！

Sketch是一款轻量而高效的矢量设计工具&#xff0c;助力全球设计师创造了诸多惊艳作品。安装Sketch的优势主要体现在其矢量编辑、控件和样式功能上。而下载安装“Sketch中文版”即时设计同样出色&#xff0c;它作为一站式设计平台&#xff0c;功能更全面。即时设计拥有纯中文的…
阅读更多...
aws(学习笔记第九课) 使用AWS的网络存储EBS

aws(学习笔记第九课) 使用AWS的网络存储EBS

aws(学习笔记第九课) 使用AWS的网络存储EBS 学习内容&#xff1a; 使用AWS的网络存储EBS 1.使用AWS的网络存储EBS EBS是什么 EBS是aws Elastic Block Store的缩写&#xff0c;就是AWS的弹性数据块存储。EBS有如下特点。 它不属于EC2的一部分&#xff0c;独立存在。可以独立存…
阅读更多...
DAY67WEB 攻防-Java 安全JNDIRMILDAP五大不安全组件RCE 执行不出网

DAY67WEB 攻防-Java 安全JNDIRMILDAP五大不安全组件RCE 执行不出网

知识点&#xff1a; 1、Java安全-RCE执行-5大类函数调用 2、Java安全-JNDI注入-RMI&LDAP&高版本 3、Java安全-不安全组件-Shiro&FastJson&JackJson&XStream&Log4j Java安全-RCE执行-5大类函数调用 Java中代码执行的类&#xff1a; Groovy Runti…
阅读更多...
11-Python基础编程之错误和异常

11-Python基础编程之错误和异常

Python基础编程之错误和异常 概念错误异常 常见的系统异常异常的解决预防捕捉处理异常with语句 手动抛出异常自定义异常 概念 错误 可以通过代码进行修复&#xff1b; 异常 需要提前考虑&#xff0c;设定限制条件&#xff1b;不能通过代码进行修复&#xff1b; 常见的系…
阅读更多...
鸿蒙开发融云demo发送图片消息

鸿蒙开发融云demo发送图片消息

鸿蒙开发融云demo发送图片消息 融云鸿蒙版是不带UI的&#xff0c;得自己一步步搭建。 这次讲如何发送图片消息&#xff0c;选择图片&#xff0c;显示图片消息。 还是有点难度的&#xff0c;好好看&#xff0c;好好学。 一、思路&#xff1a; 选择图片用&#xff1a;photoVie…
阅读更多...
Linux工具(yum/apt,vim)

Linux工具(yum/apt,vim)

yum(或apt) Linux中常见的软件的安装方式 : 1. yum/apt 2. rpm 安装包安装 3. 源码安装 yum/apt相当于手机中的各种应用管家 vim指令 vim是一个多模式的编辑器,只用于写代码 刚进入vim默认是命令模式 想要在vim中写代码,必须要进入插入模式 想要退出vim首先必须进入底行…
阅读更多...
Java设计模式之代理模式(一)

Java设计模式之代理模式(一)

什么是代理&#xff1f;可以理解为其他对象提供一种代理以控制对这个对象的访问。 举个例子&#xff0c;生活中的外卖平台&#xff0c;店铺是制作外卖的&#xff0c;然后放到平台上售卖。这里的店铺就是真实角色&#xff0c;为了能够让店铺不用担心销售等问题&#xff0c;从而…
阅读更多...
各类素材网站下载主题源码 CeoDocs v3.6 开心版

各类素材网站下载主题源码 CeoDocs v3.6 开心版

WordPress付费办公素材下载主题 – 各类素材网站下载主题 CeoDocs_v3.6_开心版CeoDocs主题是一款轻量级、 且简洁大气、付费素材下载类型主题&#xff0c;定位于办公素材行业&#xff0c;当然也适用于办公文档、PPT模板、设计素材、 图片素材、音效素材、视频素材各类素材网站…
阅读更多...
巨好看的登录注册界面源码

巨好看的登录注册界面源码

展示效果 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevic…
阅读更多...
Redis-发布/订阅交互模式

Redis-发布/订阅交互模式

文章目录 一、消息代理介绍二、Redis中客户端、服务器之间的交互模式介绍三、Redis发布/订阅交互模式的操作 一、消息代理介绍 “消息代理”&#xff08;Message Broker&#xff09;是一种软件组件&#xff0c;它在不同的应用程序之间传递消息。在Redis的上下文中&#xff0c;…
阅读更多...
利用Kubernetes原生特性实现简单的灰度发布和蓝绿发布

利用Kubernetes原生特性实现简单的灰度发布和蓝绿发布

部分借鉴地址: https://support.huaweicloud.com/intl/zh-cn/bestpractice-cce/cce_bestpractice_10002.html 1.原理介绍 用户通常使用无状态负载 Deployment、有状态负载 StatefulSet等Kubernetes对象来部署业务&#xff0c;每个工作负载管理一组Pod。以Deployment为例&#x…
阅读更多...
18.04Ubuntu遇到Unable to locate package

18.04Ubuntu遇到Unable to locate package

解决办法&#xff1a; 要先升级你的apt Sudo apt-get update
阅读更多...
《安全基石：等保测评的全方位解读》

《安全基石：等保测评的全方位解读》

在数字化转型的浪潮中&#xff0c;网络安全已成为企业生存与发展的核心议题。等保测评&#xff0c;作为我国网络安全等级保护制度的重要组成部分&#xff0c;不仅是企业安全的基石&#xff0c;更是推动企业高质量发展的关键。本文将全面解读等保测评的内涵、作用及其对企业的深…
阅读更多...
（五）Spark大数据开发实战：灵活运用PySpark常用DataFrame API

（五）Spark大数据开发实战：灵活运用PySpark常用DataFrame API

目录 一、PySpark 二、数据介绍 三、PySpark大数据开发实战 1、数据文件上传HDFS 2、导入模块及数据 3、数据统计与分析 ①、计算演员参演电影数 ②、依次罗列电影番位前十的演员 ③、按照番位计算演员参演电影数 ④、求每位演员所有参演电影中的最早、最晚上映时间及…
阅读更多...
SpringFactoriesLoader

SpringFactoriesLoader

1.什么是SPI (面试题) SPI全名Service Provider interface&#xff0c;翻译过来就是“服务提供接口”&#xff0c;再说简单就是提供某一个服务的接口&#xff0c; 提供给服务开发者或者服务生产商来进行实现。 Java SPI 是JDK内置的一种动态加载扩展点的实现。 这个机制在一…
阅读更多...
Apifox 10月更新｜测试步骤支持添加脚本和数据库操作、测试场景支持回收站、变量支持「秘密」类型

Apifox 10月更新｜测试步骤支持添加脚本和数据库操作、测试场景支持回收站、变量支持「秘密」类型

Apifox 新版本上线啦&#xff01; 看看本次版本更新主要涵盖的重点内容&#xff0c;有没有你所关注的功能特性&#xff1a; 自动化测试模块能力持续升级 测试步骤支持添加「脚本」和「数据库操作」 测试场景和定时任务支持回收站内恢复 定时任务支持设置以分钟频率运行 导入…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023