echarts画地图

### 使用 ECharts 绘制地图 #### 创建 HTML 容器 为了展示地图，首先需要在HTML文件中创建一个用于容纳图表的`div`元素。 ```html <div id="main" style="width: 600px;height:400px;"></div> ``` #### 引入 ECharts 库 确保已经在项目中引入了ECharts库。可以通过CDN链接快速引入： ```html <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> ``` #### 初始化 ECharts 实例并加载地图数据 接下来，在JavaScript部分初始化ECharts实例，并准备要显示的数据集以及相应的配置选项。这里以绘制中国省份之一——广西为例[^2]。 ```javascript // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 显示loading动画效果 myChart.showLoading(); // 模拟异步请求获取地理JSON数据（实际开发应替换为真实接口） setTimeout(function () { // 关闭loading动画 myChart.hideLoading(); // 此处模拟从服务器端获得的地图json数据 var guangxiJsonData = {...}; // 省略具体json结构 // 注册名为'guangxi'的地图类型 echarts.registerMap('guangxi', guangxiJsonData); let option = { title : { text: '广西壮族自治区', subtext: '', left: 'center' }, tooltip : { trigger: 'item' }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature : { dataView : {readOnly: false}, restore : {}, saveAsImage : {} } }, visualMap: { min: 800, max: 50000, text:['High','Low'], realtime: false, calculable: true, inRange: { color: ['lightskyblue','yellow', 'orangered'] } }, series : [ { name: '广西', type: 'map', roam: true, // 是否开启鼠标缩放和平移漫游 mapType: 'guangxi', // 自定义扩展图表类型 itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name:'南宁市',value:Math.round(Math.random()*5000)}, ... ] } ] }; // 设置option参数来渲染图形 myChart.setOption(option); }, 1000); // 模拟延迟时间 ``` 上述代码展示了如何利用ECharts框架构建一张简单的交互式地图可视化界面。其中包含了基本组件如标题、工具箱等功能模块；并通过设置不同的样式属性让最终呈现更加美观实用[^1]。