Echarts：Vue3中引入地图，展示不同省市数据

以中国地图为例

引入中国地图geojson数据

import china from "@/assets/json/china.json"

将json数据加载到echarts中

this.$echarts.registerMap('china', china);

绘制

let data = this.getSingleChinaData(temp);
const _myChart = this.myChart
const mapType = this.mapType
// 绘制图表
_myChart.setOption({backgroundColor: "#FFFFFF",tooltip: {trigger: "item"},//左侧小导航图标visualMap: {pieces: [{gt: 1000, color: '#661E20'},{gt: 500, lte: 1000, color: '#BA3A37'},{gt: 100, lte: 499, color: '#D46354'},{gt: 10, lte: 99, color: '#E8A188'},{lt: 9, color: '#FAEBD2'}]},series: [{name: "确诊病例", type: "map", roam: true, mapType, data,label: {normal: {show: true //省份名称----你可以选择true，展示每个省份的名称}},}]
})

data格式如下图所示

mapType 为对应 json数据名称
这里应为"china"

效果

Echarts：Vue3中引入地图，展示不同省市数据相关推荐

uniapp vue3中引入外部3D模型(适配App)
uniapp vue3中引入外部3D模型(适配App) 主要方式是通过renderjs来实现的, 因为使用threejs的话需要获取页面上的dom节点, 然后需要把threejs创建出来的canvan ...
【Python 实战基础】如何绘制中国地图展示省份GDP数据
目录一.实战场景二.主要知识点文件读写基础语法字符串处理文件生成数据构建循环遍历三.菜鸟实战 1.创建 python 文件 2.运行结果一.实战场景实战场景: 如何绘制中国地图展 ...
vue3中引入jQuery
vue中使用jQuery 1. 下载jQuery 2.局部引入 3.mounted中直接用走了一点弯路,特来记录一下. 1. 下载jQuery npm install jQuery 2.局部引入在 ...
vue3 中通过$refs 获取子组件数据
vue2 中获取子组件中的数据方法,可以使用 this.$refs ,但此方式在vue3中不适用了. 问题: 点击删除行的同时修改表格中数据选中状态,需要通过 ref 操作表格中的数据. 具体代码如下 ...
html中如何美化展示json格式数据
本篇文章给大家介绍 html中美化展示json格式数据的方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 直接上代码: html中主要加一个pre 的标签 <h2>G ...
使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
vue 引入json地图_使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件...
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
vue3.0中echarts实现中图地图的省份切换，并解决多次切换后地图卡死的情况
一.echarts安装及地图的准备 1.安装echarts npm install echarts 2.下载china.js等json文件到项目中的文件夹 map的下载链接:https://pan.b ...
关于在echarts/ngx-echarts中引入省份地图简易实现
由于不可抗力的因素,echarts给了我一个亲切的警告. 于是,从没有认真看过echarts地图实现的我,心态炸了. 那么,如何来解决这个问题呢? 按照我超级清丽的画风和长时间的代码编辑习惯,那一定是 ...
vue 引入json地图_vue中引入地图的js文件，显示echarts is not loaded
<script type="text/javascript"> var vue = new Vue({ el:'#app', data:{ function () { ...

Echarts：Vue3中引入地图，展示不同省市数据

Echarts：Vue3中引入地图，展示不同省市数据相关推荐

最新文章

热门文章