2024年Web前端最全vue+echarts 区域地图绘制（街道）_echarts地图分块，2024年最新逆袭面经分享

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图
require('echarts/map/js/china');
// 引入要使用的组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/geo');
 
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据
var option = {
    tooltip: {},
    geo: {
        map: 'china',
        roam: true, // 是否开启鼠标缩放和平移漫游
        label: {
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '街道',
            type: 'map',
            geoIndex: 0,
            data: [
                {name: '北京.东城区', value: Math.round(Math.random() * 1000)},
                {name: '北京.西城区', value: Math.round(Math.random() * 1000)},
                // ... 其他数据项
            ]
        }
    ]
};
 
// 为echarts对象加载数据
myChart.setOption(option);

这段代码演示了如何使用ECharts创建一个区域性的地图，并在地图上标注数据点。代码中使用了require来引入ECharts的模块，这是模块化的方式，适用于现代的JavaScript工程构建工具，如Webpack。代码中的geo属性启用了地图的漫游和缩放功能，series属性中的type为map表示我们要绘制的是一个地图，geoIndex指定了使用geo组件中的map。最后，我们通过setOption方法将配置项和数据加载到ECharts实例中，从而生成了地图。