// 初始化地图数据init(){// 主地图的JSON文件下载let path=require('../../../../../public/mapJson/china.json');echarts.registerMap("china",path);this.changeOptions("china");this.myChart=echarts.init(document.querySelector("#echatsMap"));this.myChart.setOption(this.distributionOptions)...
1、这里是把series的map作为上层(它的zlevel为1,),geo渲染的map作为底层(它的zlevel为0)在底层地图上渲染阴影 实现2.5D ; 因为visualMap是需要渲染在series上的(这块不太确定,目前在官方没找到visualMap可以选择geo渲染), scatter的小红旗zlevel为3 2、目前发现在visualMap中的pieces中使用symbol时 series中的type:...
mounted() { let myChart= echarts.init(this.$el,document.getElementById("main"));//注册的是中国地图,必须包括geo组件或者mep图标类型的时候才可以使用//地图:世界地图,中国地图,省份地图,市区地图echarts.registerMap("china", geoJson); myChart.setOption({//背景色backgroundColor:"rgb(70, 70, 231...
import '../../../node_modules/echarts/map/js/province/fujian.js' 5、map(地图)对应的资源文件有两种,一种是导入JS文件,一种是读取JSON文件,在vue项目中,map对应的资源文件存在于node_moudles中的echarts文件夹,当然在vue中可以通过http请求去读取地图对应的JSON文件,但是要求JSON文件必须在static文件中,不...
我这里采用的是echars地图实现,技术栈是vue 准备工作 需要引用几个文件echars.js、china.js、world.js、geoAtlasJson.js <!-- 中国地图 --><!-- 世界地图 --> 一级页面部分 HTML部分 创建两个容器,分别放置中国地图和世界地图 data数据部分 data:function(){return{chinaMap:"",//中国地图worldMap...
因为echarts 在 5.0 及之后版本因 包体积优化和法规规定 取消了内置 json 地图数据,但仍然可以下载之前版本的依赖包来使用或下载曾经内置的地图数据。 若要引地图 json 数据,建议下载 echarts@4.9.0 ,这是 echarts 取消内置前的最新版本地图 json 数据,之前的版本地图数据比如 3.x,2.x 或多或少在地图边界和...
这个地图的vue源文件(在下面) 关于一些修改说明放到了第三条,如果你需要修改地图颜色等,可以看看。 将以下两个文件放到同一目录下即可 china.js china.js中的坐标是跟真实的地理坐标对应的,所以你可以直接在这个地图上添加一些实际的坐标指示。 (function (root, factory) { ...
直接先上项目github链接,代码注释全面,地图组件可以直接拿来在业务里使用👇 项目仓库地址 项目在线预览地址👇: https://vue3_echarts_geo_map-rfka0hh6-kikidoulovemeruriding.4everland.app 第1步,创建好一个vue3+typescript的项目,开始安装相关库
2、注册地图到echarts中 //根据自身情况,粘贴来的数据放在哪里就从哪里导入 import chinaMap from "@/assets/map/china.json"; //注册地图到echarts中 这里的 "china" 要与地图数据的option中的geo中的map对应 echarts.registerMap("china", { geoJSON: chinaMap }); ...
一、npm安装依赖 Echarts最新的5.0版本,缺少内置的中国地图资料文件(china.js),所以只能用4.9版本,命令如下 `npm install echarts@4.9.0` 也可通过package.json文件查看/修改版本号 二、引入Echarts相关依赖 import echarts from "echarts/lib/echarts" ...