需求:

按照人口数量密集度,颜色由浅到深展示

实现:

基于现有的Vue3.0+4.5.13Cli框架,安装Echarts

npm install echarts@4.9.0 --save

安装成功后,就可以直接使用了

<template><div class="about"><div ref="chart" style="width: 1900px;height:800px;"></div></div>
</template>
<script>
// 导入图表
import echarts from 'echarts'
// 导入中国地图
import 'echarts/map/js/china'
import { reactive,ref,onMounted } from 'vue'
export default {// 启动函数setup(){const state = reactive({chart:ref()})const init = () => {if(state.chart){// 图表的初始化let mycat = echarts.init(state.chart)const option = {title:{text:'vue3.0引入中国地图(人口分布数量)',x:'center',textStyle: {color:'#9c0505'}},// 数据和类型series: [{type:'map',map:'china',label:{show: true,color:'red',fontSize:10},// 地图大小倍数zoom:1.2,data:[{name:'北京',value:40000},{name:'山西',value:30000},{name:'内蒙古',value:5000},{name:'青海',value:7000},{name:'河北',value:25000},{name:'广东',value:10000},{name:'黑龙江',value:40000},{name:'南海诸岛',value:20000},]}],visualMap:{min: 800,max: 50000,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}}}// 指定数据项和数据显示mycat.setOption(option);}}onMounted(() => {init();})return state}
}
</script>

效果

最后将代码封装成组件,在展示时传入数据调用即可

作者：彼岸舞

时间：2021\06\29

内容关于：VUE

本文属于作者原创,未经允许,禁止转发

Vue3.0 + Echarts 实现地区人口数量分布展示相关推荐

python爬虫爬取最好大学网排名分析地区大学数量分布并绘制柱状图和词云
本人也是初学者,本博客用于python初学者参考使用. 分析网页本次爬取的是最好大学网软科中国最好大学排名2018:http://www.zuihaodaxue.cn/zuihaodaxuepaim ...
山东十大计算机排名2015,山东省各市人口数量2015年排名
2014-2015年,山东省人口达9789万人. 根据2014年末常住人口数据,将17市按人口规模划分为五档. 第一档(人口超过1000万):1个城市,为临沂市(1022.1万); 第二档 (人口80 ...
重庆市人口信息平台服务器地址,重庆各区人口数量排名,2021年重庆各区人口数据统计分析...
一个城市的人口数量简介的反映了这个城市活跃度,人口数量庞大说明这个城市的发展是有很大潜力的.人可以带动经济消费促进经济发展.那么重庆所有的地区人口数量是多少?各地区人口排名怎么样?本文小编带你一起了解 ...
在vue3.0中安装并使用echarts
(vue3.0安装并使用echarts) 1. 安装echarts npm install echarts --save 2. main.js import { createApp } from 'v ...
【预测模型】基于GM（1,1）预测某地区未来6年的人口数量
目录预测某地区未来6年的人口数量预测某地区未来6年的人口数量灰色预测模型是一种基于灰色系统理论的建模与预测方法,它可以通过对已知数据的处理得到一个适当的预测模型,从而对未来数据进行预测.在MAT ...
【力扣】08 剧情触发时间：在战略游戏中，玩家往往需要发展自己的势力来触发各种新的剧情。一个势力的主要属性有三种，分别是文明等级（C），资源储备（R）以及人口数量（H）。在游戏开始时（第 0 天），三
LCP 08. 剧情触发时间在战略游戏中,玩家往往需要发展自己的势力来触发各种新的剧情.一个势力的主要属性有三种,分别是文明等级(C),资源储备(R)以及人口数量(H).在游戏开始时(第 0 天), ...
TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的语 ...
2020人口普查全国人口学历分布情况
最高学历研究生按照国家统计局最高学历研究生统计,数据准确. echars参数 option = {title: {text: '2020人口普查学历分布图',subtext: '数据来源于国家统计局 ...
论vue3.0和vue2.0区别之编程方式及例子详解
系列文章目录第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑实现 vue-cli2和vue-cli3同时并存及常见命令第三章 vue3.0项目实战 - Ele ...

Vue3.0 + Echarts 实现地区人口数量分布展示

需求:

实现:

Vue3.0 + Echarts 实现地区人口数量分布展示相关推荐

最新文章

热门文章