vue3使用echarts绘制地图

vue3使用echarts绘制地图

  1. 安装echarts
npm install echarts
  1. 下载地图的json数据【我这里是把json数据单独粘出来然后新建了一个文件china.json】
    下载中国及各个省份的地图数据
  2. 引入
import chinaJson from './china.json'
  1. 绘制地图
<template><div ref="myChart" style="width: 1000px; height: 1000px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import chinaJson from './china.json'
import { ref, onMounted } from 'vue'
const myChart = ref(null)onMounted(() => {const myECharts = echarts.init(myChart.value);echarts.registerMap('china', chinaJson);var option;function randomData() {return Math.round(Math.random() * 1000);}var data = [{name: '北京',value1: randomData(),value2: randomData(),}, {name: '天津',value1: randomData(),value2: randomData(),}, {name: '上海',value1: randomData(),value2: randomData(),}, {name: '重庆',value1: randomData(),value2: randomData(),}, {name: '河北',value1: randomData(),value2: randomData(),}, {name: '河南',value1: randomData(),value2: randomData(),}, {name: '云南',value1: randomData(),value2: randomData(),}, {name: '辽宁',value1: randomData(),value2: randomData(),}, {name: '黑龙江',value1: randomData(),value2: randomData(),}, {name: '湖南',value1: randomData(),value2: randomData(),}, {name: '安徽',value1: randomData(),value2: randomData(),}, {name: '山东',value1: randomData(),value2: randomData(),}, {name: '新疆',value1: randomData(),value2: randomData(),}, {name: '江苏',value1: randomData(),value2: randomData(),}, {name: '浙江',value1: randomData(),value2: randomData(),}, {name: '江西',value1: randomData(),value2: randomData(),}, {name: '湖北',value1: randomData(),value2: randomData(),}, {name: '广西',value1: randomData(),value2: randomData(),}, {name: '甘肃',value1: randomData(),value2: randomData(),}, {name: '山西',value1: randomData(),value2: randomData(),}, {name: '内蒙古',value1: randomData(),value2: randomData(),}, {name: '陕西',value1: randomData(),value2: randomData(),}, {name: '吉林',value1: randomData(),value2: randomData(),}, {name: '福建',value1: randomData(),value2: randomData(),}, {name: '贵州',value1: randomData(),value2: randomData(),}, {name: '广东',value1: randomData(),value2: randomData(),}, {name: '青海',value1: randomData(),value2: randomData(),}, {name: '西藏',value1: randomData(),value2: randomData(),}, {name: '四川',value1: randomData(),value2: randomData(),}, {name: '宁夏',value1: randomData(),value2: randomData(),}, {name: '海南',value1: randomData(),value2: randomData(),}, {name: '台湾',value1: randomData(),value2: randomData(),}, {name: '香港',value1: randomData(),value2: randomData(),}, {name: '澳门',value1: randomData(),value2: randomData(),}];var resultdata0 = [];var resultdata1 = [];var resultdata2 = [];var sum0 = 0;var sum1 = 0;var sum2 = 0;var titledata = [];for (var i = 0; i < data.length; i++) {var d0 = {name: data[i].name,value: data[i].value1 + data[i].value2};var d1 = {name: data[i].name,value: data[i].value1};var d2 = {name: data[i].name,value: data[i].value2};titledata.push(data[i].name)resultdata0.push(d0);resultdata1.push(d1);resultdata2.push(d2);sum0 += data[i].value1 + data[i].value2;sum1 += data[i].value1;sum2 += data[i].value2;}function NumDescSort(a, b) {return a.value - b.value;}resultdata0.sort(NumDescSort);resultdata1.sort(NumDescSort);resultdata2.sort(NumDescSort);option = {title: [{text: '销售量统计',subtext: '纯属虚构',left: 'center'}, {text: '全部: ' + sum0,right: 120,top: 40,width: 100,textStyle: {color: '#fff',fontSize: 16}}, {text: "门板: " + sum1,right: 120,top: 40,width: 100,textStyle: {color: '#fff',fontSize: 16}}, {text: "拼框门: " + sum2,right: 120,top: 40,width: 100,textStyle: {color: '#fff',fontSize: 16}},],tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',data: ['全部', '门板', '拼框门'],selectedMode: 'single',},visualMap: {min: 0,max: 2500,left: 'left',top: 'bottom',text: ['高', '低'],calculable: true,colorLightness: [0.2, 100],color: ['#c05050', '#e5cf0d', '#5ab1ef'],dimension: 0},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},grid: {right: 40,top: 100,bottom: 40,width: '30%'},xAxis: [{position: 'top',type: 'value',boundaryGap: false,splitLine: {show: false},axisLine: {show: false},axisTick: {show: false},}],yAxis: [{type: 'category',data: titledata,axisTick: {alignWithLabel: true}}],series: [{z: 1,name: '全部',type: 'map',map: 'china',left: '10',right: '35%',top: 100,bottom: "35%",zoom: 0.75,label: {normal: {show: true},emphasis: {show: true}},//roam: true,data: resultdata0}, {z: 1,name: '门板',type: 'map',map: 'china',left: '10',right: '35%',top: 100,bottom: "35%",zoom: 0.75,label: {normal: {show: true},emphasis: {show: true}},//roam: true,data: resultdata1}, {z: 1,name: '拼框门',type: 'map',map: 'china',left: '10',right: '35%',top: 100,bottom: "35%",zoom: 0.85,label: {normal: {show: true},emphasis: {show: true}},//roam: true,data: resultdata2}, {name: '全部',z: 2,type: 'bar',label: {normal: {show: true},emphasis: {show: true,}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata0}, {name: '门板',z: 2,type: 'bar',label: {normal: {show: true},emphasis: {show: true}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata1}, {name: '拼框门',z: 2,type: 'bar',label: {normal: {show: true},emphasis: {show: true}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata2}, {name: '全部',z: 2,type: 'pie',radius: ['17%', '25%'],center: ['30%', '82.5%'],label: {normal: {show: true},emphasis: {show: true,}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata0}, {name: '门板',z: 2,type: 'pie',radius: ['17%', '25%'],center: ['30%', '82.5%'],label: {normal: {show: true},emphasis: {show: true}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata1}, {name: '拼框门',z: 2,type: 'pie',radius: ['17%', '25%'],center: ['30%', '82.5%'],label: {normal: {show: true},emphasis: {show: true}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata2}]};option && myECharts.setOption(option)
})</script>
<style></style><!-- <template ><div :id="id" :style="{ width: width, height: height }"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, watch} from 'vue'
const props = defineProps({id: {type: String,default: 'myChart'},width: {type: String,default: '100%'},height: {type: String,default: '100%'},option: {type: Object,default: () => { }}
})
let myChart = null;
watch(props.option, () => {drawEcharts();
})
onMounted(() => {drawEcharts();
});
function drawEcharts() {myChart = echarts.init(document.getElementById(props.id));let option = props.option;option && myChart.setOption(option);}</script>
<style></style> -->

实现效果如下图:【上述代码使用的是可视化社区里的这个案例,如有需要自行按需更改即可!】
在这里插入图片描述
5. 封装echarts【具体封装流程可参考博客】

<template ><div :id="id" :style="{ width: width, height: height }"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, watch } from 'vue'
import chinaJson from './china.json'
const props = defineProps({id: {type: String,default: 'myChart'},width: {type: String,default: '100%'},height: {type: String,default: '100%'},option: {type: Object,default: () => { }}
})
let myChart = null;
watch(props.option, () => {drawEcharts();
})
onMounted(() => {drawEcharts();
});
function drawEcharts() {myChart = echarts.init(document.getElementById(props.id));echarts.registerMap('china', chinaJson);let option = props.option;option && myChart.setOption(option);}</script>
<style></style>
  1. 直接在父组件中使用
<script setup>
import Echarts from './components/Echarts.vue';
import { ref, onMounted } from 'vue';
function randomData() {return Math.round(Math.random() * 1000);
}var data = [{name: '北京',value1: randomData(),value2: randomData(),
}, {name: '天津',value1: randomData(),value2: randomData(),
}, {name: '上海',value1: randomData(),value2: randomData(),
}, {name: '重庆',value1: randomData(),value2: randomData(),
}, {name: '河北',value1: randomData(),value2: randomData(),
}, {name: '河南',value1: randomData(),value2: randomData(),
}, {name: '云南',value1: randomData(),value2: randomData(),
}, {name: '辽宁',value1: randomData(),value2: randomData(),
}, {name: '黑龙江',value1: randomData(),value2: randomData(),
}, {name: '湖南',value1: randomData(),value2: randomData(),
}, {name: '安徽',value1: randomData(),value2: randomData(),
}, {name: '山东',value1: randomData(),value2: randomData(),
}, {name: '新疆',value1: randomData(),value2: randomData(),
}, {name: '江苏',value1: randomData(),value2: randomData(),
}, {name: '浙江',value1: randomData(),value2: randomData(),
}, {name: '江西',value1: randomData(),value2: randomData(),
}, {name: '湖北',value1: randomData(),value2: randomData(),
}, {name: '广西',value1: randomData(),value2: randomData(),
}, {name: '甘肃',value1: randomData(),value2: randomData(),
}, {name: '山西',value1: randomData(),value2: randomData(),
}, {name: '内蒙古',value1: randomData(),value2: randomData(),
}, {name: '陕西',value1: randomData(),value2: randomData(),
}, {name: '吉林',value1: randomData(),value2: randomData(),
}, {name: '福建',value1: randomData(),value2: randomData(),
}, {name: '贵州',value1: randomData(),value2: randomData(),
}, {name: '广东',value1: randomData(),value2: randomData(),
}, {name: '青海',value1: randomData(),value2: randomData(),
}, {name: '西藏',value1: randomData(),value2: randomData(),
}, {name: '四川',value1: randomData(),value2: randomData(),
}, {name: '宁夏',value1: randomData(),value2: randomData(),
}, {name: '海南',value1: randomData(),value2: randomData(),
}, {name: '台湾',value1: randomData(),value2: randomData(),
}, {name: '香港',value1: randomData(),value2: randomData(),
}, {name: '澳门',value1: randomData(),value2: randomData(),
}];var resultdata0 = [];
var resultdata1 = [];
var resultdata2 = [];
var sum0 = 0;
var sum1 = 0;
var sum2 = 0;
var titledata = [];
for (var i = 0; i < data.length; i++) {var d0 = {name: data[i].name,value: data[i].value1 + data[i].value2};var d1 = {name: data[i].name,value: data[i].value1};var d2 = {name: data[i].name,value: data[i].value2};titledata.push(data[i].name)resultdata0.push(d0);resultdata1.push(d1);resultdata2.push(d2);sum0 += data[i].value1 + data[i].value2;sum1 += data[i].value1;sum2 += data[i].value2;
}function NumDescSort(a, b) {return a.value - b.value;
}resultdata0.sort(NumDescSort);
resultdata1.sort(NumDescSort);
resultdata2.sort(NumDescSort);const lineOption = ref({});
lineOption.value = {title: [{text: '销售量统计',subtext: '纯属虚构',left: 'center'}, {text: '全部: ' + sum0,right: 120,top: 40,width: 100,textStyle: {color: '#fff',fontSize: 16}}, {text: "门板: " + sum1,right: 120,top: 40,width: 100,textStyle: {color: '#fff',fontSize: 16}}, {text: "拼框门: " + sum2,right: 120,top: 40,width: 100,textStyle: {color: '#fff',fontSize: 16}},],tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',data: ['全部', '门板', '拼框门'],selectedMode: 'single',},visualMap: {min: 0,max: 2500,left: 'left',top: 'bottom',text: ['高', '低'],calculable: true,colorLightness: [0.2, 100],color: ['#c05050', '#e5cf0d', '#5ab1ef'],dimension: 0},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},grid: {right: 40,top: 100,bottom: 40,width: '30%'},xAxis: [{position: 'top',type: 'value',boundaryGap: false,splitLine: {show: false},axisLine: {show: false},axisTick: {show: false},}],yAxis: [{type: 'category',data: titledata,axisTick: {alignWithLabel: true}}],series: [{z: 1,name: '全部',type: 'map',map: 'china',left: '10',right: '35%',top: 100,bottom: "35%",zoom: 0.75,label: {normal: {show: true},emphasis: {show: true}},//roam: true,data: resultdata0}, {z: 1,name: '门板',type: 'map',map: 'china',left: '10',right: '35%',top: 100,bottom: "35%",zoom: 0.75,label: {normal: {show: true},emphasis: {show: true}},//roam: true,data: resultdata1}, {z: 1,name: '拼框门',type: 'map',map: 'china',left: '10',right: '35%',top: 100,bottom: "35%",zoom: 0.85,label: {normal: {show: true},emphasis: {show: true}},//roam: true,data: resultdata2}, {name: '全部',z: 2,type: 'bar',label: {normal: {show: true},emphasis: {show: true,}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata0}, {name: '门板',z: 2,type: 'bar',label: {normal: {show: true},emphasis: {show: true}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata1}, {name: '拼框门',z: 2,type: 'bar',label: {normal: {show: true},emphasis: {show: true}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata2}, {name: '全部',z: 2,type: 'pie',radius: ['17%', '25%'],center: ['30%', '82.5%'],label: {normal: {show: true},emphasis: {show: true,}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata0}, {name: '门板',z: 2,type: 'pie',radius: ['17%', '25%'],center: ['30%', '82.5%'],label: {normal: {show: true},emphasis: {show: true}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata1}, {name: '拼框门',z: 2,type: 'pie',radius: ['17%', '25%'],center: ['30%', '82.5%'],label: {normal: {show: true},emphasis: {show: true}},itemStyle: {emphasis: {color: "rgb(254,153,78)"}},data: resultdata2}]
};
</script><template><Echarts :width="'90vw'" :height="'90vh'" :option="lineOption" id="line" />
</template>

实现效果同上

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

面试经典150题【31-40】

文章目录 面试经典150题【31-40】76.最小覆盖字串36.有效的数独54.螺旋矩阵48.旋转图像73.矩阵置零289.生命游戏383.赎金信205.同构字符串290.单词规律242.有效的字母异位词 面试经典150题【31-40】 76.最小覆盖字串 基本思路很简单&#xff0c;就是先移动右边到合适位置。再移…

网络安全与IP安全网络安全

网络安全与IP安全网络安全 网络安全 是指网络系统的硬件&#xff0c;软件以及系统中的数据收到的保护。 保护的基本属性为&#xff1a;机密性&#xff0c;身份认证&#xff0c;完整性和可用性&#xff1b; 基本特征&#xff1a;相对性&#xff0c;时效性&#xff0c;相关性…

[面试]我们常说的负载均衡是什么东西?

什么是负载均衡 如果用户量很多, 服务器的流量也随之增大, 此时出现两个问题, 软件性能下降 容易出现单点故障 为了解决这些问题, 引入了集群化架构, 也就是把一个软件同时部署在多个服务器上 集群化架构出现的问题 架构改变后又出现了两个问题 如何将请求均匀的发送到多…

大疆无人机视频删了怎么恢复?尝试这些恢复技巧

无人机拍摄的视频已经成为许多飞行爱好者和专业人士珍贵的记忆与资料。然而&#xff0c;误删视频是许多人都可能遇到的问题。当您不慎删除了大疆无人机中的视频时&#xff0c;不必过于焦虑。本文将为您详细介绍如何恢复这些误删的视频&#xff0c;帮助您找回宝贵的回忆。 图片来…

Laravel03 路由到控制器与连接数据库

Laravel03 路由到控制器与连接数据库 1. 路由到控制器2. 连接数据库 1. 路由到控制器 如下图一些简单的逻辑处理可以放在web.php中&#xff0c;也就是路由的闭包函数里面。但是大的项目&#xff0c;我们肯定不能这么写。 为什么保证业务清晰好管理&#xff0c;都应该吧业务逻辑…

【Linux深入剖析】进程优先级 | 命令行参数 | 环境变量

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1.进程优先级2.Linux…

[C++]使用C++实现监控文件是否被修改

软件开发过程中经常会用到配置文件,某些应用场景要求在软件运行时动态修改配置文件,此时就需要监控配置文件是否被修改,下面我们就来看看如何使用C实现这一功能吧 软件开发过程中经常会用到配置文件&#xff0c;某些应用场景要求在软件运行时动态修改配置文件&#xff0c;此时…

国产服务器操作系统

为何记录 最近的开发工作经常接触到国产服务器操作系统的业务&#xff0c;经常被x86、arm、龙芯、鲲鹏、欧拉...搞得一脸懵逼&#xff0c;遂记之&#xff01; 操作系统 这里按照应用场景分&#xff1a; 桌面操作系统&#xff1a;主要用于pc&#xff0c;如Windows、macOS、Li…

MES系统生产订单管理:多角度全面解析

一、MES系统生产订单管理概述 MES中的生产订单管理涉及到订单的接收、处理、执行和跟踪等多个方面。MES系统生产订单管理旨在确保生产过程中的订单信息准确无误、生产进度可控&#xff0c;从而实现高效、有序的生产。 二、生产订单管理的核心功能 订单接收与处理&#xff1a;…

30-k8s集群的七层代理-ingress资源(进阶知识)

一、ingress概述 1&#xff0c;引发问题 目前使用svc资源做网络暴露&#xff0c;使用nodeport类型&#xff0c;一个业务对应一个宿主机端口&#xff0c;那么如果业务多了&#xff0c;所占用的宿主机端口也就多了&#xff0c;虽然说宿主机端口一般情况下都是够用的&#xff0c;…

Android Jni的介绍和简单Demo实现

Android Jni的介绍和简单Demo实现 文章目录 Android Jni的介绍和简单Demo实现一、JNI的简单介绍JNINDKJni的开发背景&#xff1a;**JNI在 Android 开发里的主要应用场景&#xff1a;** 二、JNI的简单Demo1、Demo主要界面和效果展示2、CMake编译加载文件add_library 指令的加载库…

主从复制实现Redis集群

主从复制实现Redis集群实验 (一主二从): 实验环境: 使用Docker 搭建 Redis 版本 5.0.5 打开一个终端窗口&#xff0c;在其中运行如下命令创建一个名为redis-master的Redis容器。注意&#xff0c;它的端口是6379 (本地的端口:映射到容器的端口) docker run -itd--name redis-m…

深入理解 JavaScript 对象原型,解密原型链之谜(下)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

VScode连接远端服务器一直输入密码解决方法

文章目录 1 关闭远程连接2打开命令面板3 输入remote-ssh: kill vs code server on host… 1 关闭远程连接 2打开命令面板 3 输入remote-ssh: kill vs code server on host… remote-ssh: kill vs code server on host… 然后一路回车(选中出问题的主机)&#xff0c;输一遍密码…

缓存一致性问题的解决策略

缓存一致性问题的背景和概念介绍 在一个系统中&#xff0c;我们通常使用数据库来存储数据&#xff0c;以保证数据的持久性。但是&#xff0c;由于数据库的读写速度相对较慢&#xff0c;如果每次请求都直接访问数据库&#xff0c;会降低系统的响应速度。为了提高系统的性能&…

《TCP/IP详解 卷一》第7章 防火墙和NAT

7.1 引言 NAT通常改变源IP和源端口&#xff0c;不改变目的IP和目的端口。 7.2 防火墙 常用防火墙&#xff1a; 包过滤防火墙&#xff08;packet-filter firewall&#xff09; 代理防火墙&#xff08;proxy firewall&#xff09; 代理防火墙作用&#xff1a; 1. 通过代理服务…

Spring全面精简总结

Spring两大核心功能&#xff1a;IOC控制反转、AOP面向切面的编程 控制反转(loC&#xff0c;Inversion of Control)&#xff0c;是一个概念&#xff0c;是一种思想。指将传统上由程序代码直接操控的对象调用权交给容器&#xff0c;通过容器来实现对象的装配和管理。控制反转就是…

雾锁王国Enshrouded服务器几核几G够用?

雾锁王国/Enshrouded服务器CPU内存配置如何选择&#xff1f;阿里云服务器网aliyunfuwuqi.com建议选择8核32G配置&#xff0c;支持4人玩家畅玩&#xff0c;自带10M公网带宽&#xff0c;1个月90元&#xff0c;3个月271元&#xff0c;幻兽帕鲁服务器申请页面 https://t.aliyun.com…

three中界面交互gui.js库的使用

gui.js库(可视化改变三维场景) dat.gui.js说白了就是一个前端js库&#xff0c;对HTML、CSS和JavaScript进行了封装&#xff0c;学习开发的时候&#xff0c;借助dat.gui.js可以快速创建控制三维场景的UI交互界面&#xff0c;你打开课件中案例源码体验一下就能感受到。 学习dat…

C++笔记(二)--- 继承和组合

目录 C三种继承方式 构造函数 析构 继承 public继承 protected继承 private继承 组合 访问权限 构造/析构函数调用顺序 初始化 总结 C三种继承方式 C有三种继承方式&#xff1a;public protected private 属性方式为 class [派生类名称] : [继承方式] [继…