Echarts实现省级地图的两种方法（以浙江省为例） |
您所在的位置：网站首页 › 省份地图怎么画 › Echarts实现省级地图的两种方法（以浙江省为例） |
Echarts实现省级地图的两种方法（以浙江省为例）
|
Echarts实现省级地图的两种方法（以浙江省为例）
在echarts调用地图时，我们往往会使用GeoJson格式的数据，根据网上的资料，会发现官网会提供世界、中国以及各省的数据。但是，访问下载最新的echarts组件时，会发现echarts暂不提供地图下载。所以，我们需要自己找GeoJson数据，仔细一点会发现，其实在安装echarts依赖时，已经将数据下载到项目中了。你想要的省级Js、Json文件，node_modules文件下全都有。 echarts下载地址https://echarts.apache.org/zh/download-map.html.
在main文件中引用 import ‘…/node_modules/echarts/map/js/province/zhejiang.js’; 第二步 主体结构 let mychart = this.$echarts.init(document.getElementById("mychart")); let option = { geo: { map: 'china' } } mapChart.setOption(option); 第三步 具体实现 initZheJiang() { let that = this; this.mychart = this.$echarts.init(document.getElementById("mychart")); // 绘制图表 this.mychart.setOption({ backgroundColor: "#404a59", title: { text: "浙江", top: 25, left: "center", textStyle: { fontSize: 25, fontWeight: 650, color: "#fff", }, }, tooltip: { trigger: "item", formatter: function (val) { return val.data.name + "人数: " + val.data.value + "人"; }, }, toolbox: { show: true, orient: "vertical", left: "right", top: "center", feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {}, }, }, series: [ { type: "map", map: "浙江",//这里需要注意呀, //mapType: "浙江", // 是否开启鼠标缩放和平移漫游 默认不开启 itemStyle: { normal: { areaColor: "#323c48", borderColor: "#111", }, emphasis: { areaColor: "#2a333d", label: { show: true, color: "white", }, }, }, roam: true, top: 70, label: { show: true, // 是否显示对应地名 }, data: this.cityDatas, }, ], }); this.mychart.on("click", function (params) { console.log(params); that.selCity = params.name; console.log(this); console.log(that); for (let i = 0; i |
所以，要好好的用echarts提供的数据进行地图数据可视化。【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |