Echarts地图详解（地图样式、合并地图、增加地图）

最新推荐文章于 2025-06-12 15:28:46 发布

氵易风灬

最新推荐文章于 2025-06-12 15:28:46 发布

阅读量9.2w

点赞数 50

CC 4.0 BY-SA版权

分类专栏：数据可视化Echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/qq_21963133/article/details/80012899

概述

地图在我们日常的数据可视化分析中是很常见的一种展示手段，不仅美观而且很大气。尤其是在大屏展示中更是扮演着必不可缺的角色。

地图实现

下面我们就来实现一个基本的地图，并为之添加一些好看的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图</title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="map" style="width: 1000px;height: 800px"></div>
<script type="text/javascript">
    var dt = [
        {name:'芙蓉区', value: 40000.34,text:'贷款笔数：54412<br/>贷款金额：468452.35万',selected:true},
        {name:'岳麓区', value: 38000,text:'缴存人数：32412'},
        {name:'开福区', value: 18000,text:'缴存人数：22412'},
        {name:'天心区', value: 15092,text:'缴存人数：42412'},
        {name:'雨花区', value: 28000,text:'缴存人数：52412'},
        {name:'望城区', value: 12000,text:'缴存人数：72412'},
        {name:'长沙县', value: 32000,text:'缴存人数：82412'},
        {name:'宁乡县', value: 5100,text:'缴存人数：6412'},
        {name:'浏阳市', value: 2200,text:'缴存人数：3412'},
        {name:'分中心', value: 4918,text:'缴存人数：66412'}

    ];
    var option = {


        title : {
            text: '长沙市',
            subtext: '各区县',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            type:'cross',
            /*   backgroundColor:"#ff7f50",//提示标签背景颜色
             textStyle:{color:"#fff"}, //提示标签字体颜色
             formatter:function(param){
             return dt[param.dataIndex].name + "<br />" +dt[param.dataIndex].text;
             } */
            alwaysShowContent: false,
            bordeRadius: 4,
            borderWidth: 1,
            borderColor: 'rgba(0,0,0,0.2)',
            backgroundColor: 'rgba(255,255,255,0.9)',
            padding: 0,
            // position: "top",
            textStyle: {
                fontSize: 12,
                color: '#333'
            },
            formatter: function(params) {
                var color = "#FFB84D";
                var a = "<div style='background-color:"+color+";padding: 5px 10px;text-align:center;color:white;font-size: 16px;'>" + dt[params.dataIndex].name + "</div>";
                var num = Math.ceil(params.data.name[1].length / 10);
                a += "<div style='padding:3px;'>";
                for (var i = 0