展示效果：
要在 HTML 页面中使用 Echarts 显示中国地图，需要进行以下步骤：
- 在 HTML 文件中引入 Echarts 库和中国地图数据。
<head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.min.js --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入中国地图数据 --> <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> </head> - 在 HTML 文件中添加一个具有固定宽度和高度的 DOM 元素，用于容纳地图。例如：
<body> <div id="map" style="width: 800px; height: 600px;"></div> </body> - 在 JavaScript 代码中配置 Echarts 地图选项，并将其绑定到相应的 DOM 元素上。例如：
var myChart = echarts.init(document.getElementById('map')); // Echarts 地图选项配置 var option = { title: { text: '中国地图' }, tooltip: {}, visualMap: { min: 0, max: 1000, left: 'left', top: 'bottom', text: ['高', '低'], // 文本，默认为数值文本 calculable: true }, series: [ { name: '地图', type: 'map', mapType: 'china', roam: false, // 禁止缩放和拖动 label: { show: true }, data: [ {name: '北京', value: Math.round(Math.random() * 1000)}, {name: '天津', value: Math.round(Math.random() * 1000)}, {name: '上海', value: Math.round(Math.random() * 1000)}, // ...省份数据 ] } ] }; // 将地图选项绑定到 DOM 元素上 myChart.setOption(option); - 运行 HTML 文件，即可在页面中看到中国地图。
-
注意：以上代码仅为示例，在实际使用时需要根据自己的需求进行修改。
