码迷,mamicode.com
首页 > 其他好文 > 详细

一个使用 echarts 呈现地图图表的小例子

时间:2021-04-26 13:59:33      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:java   atlas   art   tom   npm   add   hit   引入   term   

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 测试</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
    <!-- 引入 jquery.js -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <style>
        body{
            background-color: black;
        }
        #main{
            background-color: rgb(11,18,46);
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的元素 -->
    <div id="main" style="width: 800px;height:800px;"></div>
    <script type="text/javascript">
    
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById(main));

        myChart.showLoading();

        // 地图数据源:https://datav.aliyun.com/tools/atlas/

        $.get(https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=150600_full, function (geoJson) {

            myChart.hideLoading();

            echarts.registerMap(EEDS, geoJson);

            myChart.setOption(option = {
                title: {
                    text: 情况统计,
                    subtext: 统计截至:2021-04-25 12:32:21,
                    textAlign: right,
                    right: -150,
                    bottom: 20,
                    textStyle: {
                        color: white
                    },
                    subtextStyle: {
                        color: white
                    }
                },
                // 相关配置文档:https://echarts.apache.org/zh/option.html#series-map
                series: [
                    {
                        name: 情况统计,
                        type: map,
                        center: [108.97269199999997, 39.26688099244878],    // 当前视角的中心点
                        zoom: 1.2,                                          // 当前视角的缩放比例
                        roam: true,                                         // 是否开启平游或缩放
                        scaleLimit: {                                       // 滚轮缩放的极限控制
                            min: 1,
       max:
2
  }, mapType: EEDS, label: { show: true, color: rgb(255, 255, 255) }, itemStyle: { areaColor: rgba(0, 0, 200, 0), borderColor: rgb(255, 255, 255) }, data: [ ] } ] }); }); </script> </body> </html>

一个使用 echarts 呈现地图图表的小例子

标签:java   atlas   art   tom   npm   add   hit   引入   term   

原文地址:https://www.cnblogs.com/xwgli/p/14701539.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!