Vue + Echarts 绘制区域图

区域图"/>

Vue + Echarts 绘制区域图

1. npm install echarts安装 echarts

2. 导入echarts和地图区域JSON，获得地图区域JSON

   import echarts from "echarts";
   import mapJson from "./mapjson/522700_full.js";
   

3. 配置项

   mapOption: {title: {text: "",subtext: "",sublink: ""},tooltip: {trigger: "item",formatter: "{b}<br/>{c} (案件数)"},series: [{name: "",type: "map",mapType: "QN", // 自定义扩展图表类型label: {show: true,},emphasis:{itemStyle:{areaColor:'#f40'}},// 鼠标移入区域，显示的名称和值data: [{ name: "瓮安县", value: 0, areaCode: "522725"},{ name: "福泉市", value: 0, areaCode: "522702" },{ name: "龙里县", value: 0, areaCode: "522730" },{ name: "贵定县", value: 0, areaCode: "522723" },{ name: "都匀市", value: 0, areaCode: "522701" },{ name: "长顺县", value: 0, areaCode: "522729" },{ name: "惠水县", value: 0, areaCode: "522731" },{ name: "平塘县", value: 0, areaCode: "522727" },{ name: "独山县", value: 0, areaCode: "522726" },{ name: "三都水族自治县", value: 0, areaCode: "522732" },{ name: "罗甸县", value: 0, areaCode: "522728" },{ name: "荔波县", value: 0, areaCode: "522722" }]// 自定义名称映射}]}
   

4. 页面

   <div ref="map" class="map"></div>
   

5. 初始化区域

   let myChart = echarts.init(this.$refs.map);
   echarts.registerMap("QN", mapJson);
   myChart.setOption(this.mapOption);
   

6. 效果