echarts绘制地图

最新推荐文章于 2024-12-31 10:46:04 发布

丶帆

最新推荐文章于 2024-12-31 10:46:04 发布

阅读量1.3k

点赞数 1

文章标签：可视化数据可视化 html js css

本文链接：https://blog.youkuaiyun.com/yf19990720/article/details/108086195

版权

本文介绍了如何使用ECharts这个JavaScript开源库来绘制地图。详细讲述了从设置容器、引入地图资源到绘制地图的完整过程，并展示了鼠标交互的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

效果图

初始效果
在这里插入图片描述

鼠标移到某一板块效果、
在这里插入图片描述
鼠标移到图例上查看效果

代码

开始前，先下载引入地图资源

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

先设置一个容器

 <style>
        * {
   
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        .div {
   
            width: 100%;
            height: 100%;
            background-color: wheat;
            overflow: hidden;
        }
    </style>
    <div class="div"></div>

绘制地图

 function random() {
   
            return Math.random() * 2000
        }
        var mycharts = echarts.init($('.div').get(0));
        mycharts.setOption({
   
            visualMap: [{
   
                type: 'piecewise',
                min: 0,
                max: 2000,
                splitNumber: 8,
                pieces: [{
   
                        min: 1500
                    }, // 不指定 max，表示 max 为无限大（Infinity）。
                    {
   
                        min: 900,
                        max: 1500
                    }, {
   
                        min: 310,
                        max: 1000
                    }, {
   
                        min: 200,
                        max: 300
                    }, {
   
                        min: 10,
                        max: 200,
                        label: '10 到 200（自定义label）'
                    }, {
   
                        value: 123,
                        label: '123（自定义特殊颜色）',
                        color: 'grey'
                    }, {
   
                        max: 5
                    }
                ],
                left: 'right',

            }],
            series: [{
   
                type: 'map',
                mapType: 'china',
                data: [{
   
                    name: '北京',
                    value: random()
                }, {
   
                    name: '天津',
                    value: random()
                }, {
   
                    name: '上海',
                    value: random()
                }