echarts绘制中国地图

最新推荐文章于 2024-08-05 05:00:00 发布

书院二层楼

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量864

点赞数

分类专栏： echarts JS 文章标签： echarts 中国地图 js

本文链接：https://blog.csdn.net/caoxinjian423/article/details/109708737

版权

本文介绍了如何利用Echarts库来绘制详细的中国地图，包括数据加载、地图配置和交互功能的实现，适用于数据可视化展示。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国地图</title>
    <style>
        body{margin: 0}
        #test{
            width: 100%;
            height: 600px;
            background-color: #044161;
        }
    </style>
</head>
<body>
<!--建立dom 容器-->
<div id="test"></div>
<!--引入echarts-->
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>

<script>
    const myChart = echarts.init(document.getElementById('test'));
    /*获取接送文件*/
    fetch('./data/China.json')
        .then((res) => res.json())
        .then(data => {
            echarts.registerMap('china',data);
            const option = {
                title: {
                    text: '中国地图',
                    left:'center',