echarts.js+china.js实现中国地图各省数据案例

暖锋丫

已于 2024-09-11 09:05:41 修改

阅读量137

点赞数 5

文章标签： javascript echarts 前端

于 2024-09-11 09:04:00 首次发布

本文链接：https://blog.csdn.net/qq_58258855/article/details/142124123

版权

1、在HTML里面引入echarts.js

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2、在HTML里面引入构建中国地图的china.js

 <script src="china.js"></script>

3、案例实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全国客户分布</title>

    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="china.js"></script>
    <style>
             body {
                   font-family: Arial, sans-serif;
                   background-color: #f0f4f8; /* 更柔和的背景色 */
                   margin: 0;
                   padding: 20px;
                   display: flex;
                   flex-direction: column;
                   align-items: center; /* 中心对齐 */
               }
       
               h1 {
                   text-align: center;
                   color: #2c3e50; /* 深色调的标题 */