echarts实现贵州地图
1. 添加标签
<div id="elementId" class="guizhou-map" style="width: 600px; height: 400px" ></div>
2.
import * as echarts from "echarts"; import mapGeoJson from "./guizhou.json"; //注册地图的数据 initMap() { // 构造 tooltip 数据 let outData = {} mapGeoJson.features.forEach(item=>{ outData[item.properties.name] = Math.floor(Math.random()*1000+1); }) let option = { // backgroundColor: "#0E0F35", // backgroundColor: "#0E0F35", tooltip: { show: true, formatter: function (params) { return ( " " + params.name + " " + outData[params.name] + "亿元 " ); }, }, series: [ { name: "乡镇地图", type: "map", map: "townMap", //使用 registerMap 注册的地图名称 data: [], label: { normal: { show: true, }, emphasis: { show: true, }, }, }, ], }; let myChart = echarts.init(document.getElementById("elementId")); echarts.registerMap("townMap", mapGeoJson); option && myChart.setOption(option); },