好的，以下是一个简单的 Vue.js 2 和 ECharts 实现的全国三级下钻地图的代码示例： ```html <template> <div id="map-container" style="height: 100%;"></div> </template> <script> import echarts from 'echarts'; import 'echarts/map/js/china'; export default { name: 'MapComponent', data() { return { mapChart: null, geoJson: null, provinceJson: null, cityJson: null, selectedProvince: '', selectedCity: '' }; }, mounted() { this.initMap(); }, methods: { initMap() { // 初始化地图 this.mapChart = echarts.init(document.getElementById('map-container')); // 加载地图数据 echarts.registerMap('china', this.geoJson, { // 下钻到省级地图 '河北': this.provinceJson, '山西': this.provinceJson, '内蒙古': this.provinceJson, // 下钻到市级地图 '石家庄市': this.cityJson, '唐山市': this.cityJson, '秦皇岛市': this.cityJson }); // 绘制地图 this.mapChart.setOption({ series: [{ type: 'map', map: 'china', label: { show: true }, itemStyle: { borderColor: '#fff', borderWidth: 1, areaColor: '#ccc' }, emphasis: { itemStyle: { borderWidth: 2, areaColor: '#eee' } }, data: [{ name: '河北', selected: true }, { name: '山西', selected: false }, { name: '内蒙古', selected: false }] }] }); // 监听地图点击事件 this.mapChart.on('click', params => { if (params.seriesType === 'map') { if (!this.selectedProvince) { // 下钻到省级地图 this.selectedProvince = params.name; this.mapChart.setOption({ series: [{ type: 'map', map: params.name, label: { show: true }, itemStyle: { borderColor: '#fff', borderWidth: 1, areaColor: '#ccc' }, emphasis: { itemStyle: { borderWidth: 2, areaColor: '#eee' } }, data: [{ name: params.name, selected: true }] }] }); } else if (!this.selectedCity) { // 下钻到市级地图 this.selectedCity = params.name; this.mapChart.setOption({ series: [{ type: 'map', map: params.name, label: { show: true }, itemStyle: { borderColor: '#fff', borderWidth: 1, areaColor: '#ccc' }, emphasis: { itemStyle: { borderWidth: 2, areaColor: '#eee' } }, data: [{ name: params.name, selected: true }] }] }); } } }); } } }; </script> ``` 在这个示例中，我们使用了 ECharts 的 `map` 类型系列来绘制地图，通过 `echarts.registerMap` 方法加载地图数据，并通过监听地图的点击事件来下钻到省级或市级地图。在这里，我提供的只是一个简单的示例，您可以根据需要进行修改和扩展。
