echarts2.2.7 自定义svg地图引入。

最新推荐文章于 2025-06-04 12:40:25 发布

weixin_58343452

最新推荐文章于 2025-06-04 12:40:25 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： jquery echarts svg

本文链接：https://blog.youkuaiyun.com/weixin_58343452/article/details/116941996

本文介绍了如何在echarts2.2.7版本中自定义引入SVG地图，针对官方文档不足的情况，提供了一种简单直接的方法。通过示例代码展示如何加载SVG地图并实现地图标记和线条效果，适用于不熟悉AMD模块加载的新手。

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

做这个文章，是憋了一肚子火，echarts官网对echarts2.2.7的教程和配置很少，对老手还行，但是对新手，并不友好。那个什么劳什子AMD方式引入，require按需引入，对我来说太麻烦了，不缺那点流量，只想尽快整出来。网上四处找例子，在猴岛上看到一个例子，还需要代价才能下载，那个火啊。后面自己琢磨了半天，终于融汇贯通，知道怎么引入了。

echarts2.2.7下载地址。https://codeload.github.com/apache/echarts/zip/2.2.7。

直接贴代码。其中，echarts-all.js是从echarts-2.2.7\build\source\echarts-all.js复制过去的。其实用echarts-2.2.7\build\dist\echarts-all.js效果一样，体积更小。

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

    

    <div id="main" style="height:400px;height: 400px;"></div>

    

    <script src="dist/jquery.1.10.js"></script>

    <script src="js/echarts-all.js"></script>

    <script>

        $(function () {

            var paramData = echarts.util.mapData.params.params.football =

            {

                getGeoJson: function (callback) {

                    $.ajax({

                        url: 'images/football.svg',

                        dataType: 'xml',

                        success: function (xml) {

                            callback(xml);

                        }

                    });

                }

            }

            console.log(paramData);

            var option = {

                backgroundColor: '#228b22',

                title: {

                    text: '2014世界杯',

                    subtext: '地图SVG扩展',

                    textStyle: {

              &