使用echarts map svg 遇到的小坑

最近自己的业务系统需要实现卫星地图来显示建筑物信息的功能，素闻免费开源的echarts有这一功能，于是参照官网资料与示例自己鼓捣起来。

官网：Apache ECharts

我打算参照该官网的示例“庖丁解牛”来做：

 废话不多说，先上代码：

1.  
    
2.  
   <!--内容开始-->
3.  
   <section class="content content_main">
4.  
    
5.  
   <!-- 用于显示地图的容器 -->
6.  
   <div id="container" style="height: 1080px"></div>
7.  
   <!-- 用于显示地图的容器 -->
8.  
    
9.  
   <!-- 以下部分根据需要引入 -->
10.  
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
11.  
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
12.  
    <!-- Uncomment this line if you want to dataTool extension
13.  
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/dataTool.min.js"></script>
14.  
    -->
15.  
    <!-- Uncomment this line if you want to use gl extension
16.  
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
17.  
    -->
18.  
    <!-- Uncomment this line if you want to echarts-stat extension
19.  
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
20.  
    -->
21.  
    <!-- Uncomment this line if you want to use map
22.  
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
23.  
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
24.  
    -->
25.  
    <!-- Uncomment these two lines if you want to use bmap extension
26.  
    <script type="text/javascript" src="https://api.map.百度.com/api?v=3.0&ak=YOUR_API_KEY"></script>
27.  
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/bmap.min.js"></script>
28.  
    -->
29.  
    <!-- 以上部分根据需要引入 -->
30.  
     
31.  
     
32.  
    <script type="text/javascript">
33.  
    var dom = document.getElementById('container');//绑定DOM元素
34.  
    //echarts的初始化设置，基本不用改
35.  
    var myChart = echarts.init(dom, null, {
36.  
    renderer: 'canvas',
37.  
    useDirtyRect: false
38.  
    });
39.  
    var option;//定义设置项
40.  
    //通过jqeury的get方法获取svg文件，并执行回调函数function (svg){}
41.  
    $.get('/static/admin/images/SatelliteMap.svg', function (svg) {
42.  
    echarts.registerMap('Beef_cuts_France', { svg: svg });//注册地图
43.  
    option = {
44.  
    // 鼠标移动至svg元素上会弹出来的提示框
45.  
    tooltip: {
46.  
    //可以格式化其显示的内容，可以使用回调函数，详见说明文档
47.  
    formatter: '{b0}: {c0}<br />'
48.  
    },
49.  
     
50.  
    // 以下部分为原示例的根据svg元素(data)的value的值而进行颜色渐变显示，这里用不到
51.  
    // visualMap: false,
52.  
    // {
53.  
    // left: 'center',
54.  
    // bottom: '10%',
55.  
    // min: 5,
56.  
    // max: 100,
57.  
    // orient: 'horizontal',
58.  
    // text: ['', 'Price'],
59.  
    // realtime: true,
60.  
    // calculable: true,
61.  
    // inRange: {
62.  
    // color: ['#dbac00', '#db6e00', '#cf0000']
63.  
    // }
64.  
    // },
65.  
    // 以上部分为原示例的根据svg元素(data)的value的值而进行颜色渐变显示，这里用不到
66.  
     
67.  
    //对数据列的设置
68.  
    series: [
69.  
    {
70.  
    name: 'French Beef Cuts',//数据列的名称
71.  
    type: 'map',//数据列的类别
72.  
    map: 'Beef_cuts_France',//数据列所要绑定的地图
73.  
    roam: true,//是否允许放大
74.  
    //数据列的显示样式
75.  
    itemStyle: {
76.  
    color: 'Yellow',//颜色设置，在我使用的自己绘制的SVG图中，这个设置项可以对svg元素的填充色不起作用
77.  
    borderColor: 'rgba(255,255,0,0.1)',//边框颜色设置
78.  
    borderWidth: 2,//边框粗细设置
79.  
    areaColor: 'rgba(255,0,0,0)',//区域颜色设置，在我使用的自己绘制的SVG图中，这个设置项可以对svg元素的填充色进行设置，前提是svg元素在绘制的时候填充颜色不透明度要大于0
80.  
    },
81.  
    //高亮显示的设置
82.  
    emphasis: {
83.  
    label: {
84.  
    show: false //不显示标签
85.  
    },
86.  
    //高亮时的样式显示
87.  
    itemStyle: {
88.  
    borderColor: 'Yellow',
89.  
    areaColor: 'rgba(255,0,0,0.5)',
90.  
    borderWidth: 2,
91.  
    borderType: 'solid'
92.  
    }
93.  
    },
94.  
    selectedMode: false,//关闭选择模式，即图元为不可选择状态。开启时，同样可以对元素被选中后的样式等进行设置
95.  
    // 以下为测试数据
96.  
    data: [
97.  
    { name: 'svg_5', value: 15 },//这里的name为svg文件中元素的name属性，很多svg编辑器绘制的svg文件是没有name属性的，必须得自己加上去。
98.  
    { name: 'svg_6', value: 35 },
99.  
    { name: 'svg_7', value: 15 },
100.  
     { name: 'svg_8', value: 25 },
101.  
     { name: 'svg_9', value: 45 },
102.  
     { name: 'svg_10', value: 85 },
103.  
     { name: 'svg_11', value: 25 },
104.  
     { name: 'svg_12', value: 15 },
105.  
     { name: 'svg_13', value: 55 },
106.  
     { name: "svg_14", value: 25 },
107.  
     {
108.  
     //每个元素都可以单独设置其itemStyle、emphasis、tooltip等参数，且该节点的参数设置会覆盖全局的设置。
109.  
     name: 'svg_15', value: 65,
110.  
     itemStyle: {
111.  
     color: 'rgb(255,255,255)',
112.  
     borderColor: 'rgba(255,0,0,1)',
113.  
     borderWidth: 3,
114.  
      
115.  
     }
116.  
     },
117.  
     { name: 'svg_16', value: 45 },
118.  
     { name: 'svg_17', value: 85 },
119.  
     { name: 'svg_18', value: 35 },
120.  
     { name: 'svg_19', value: 75 },
121.  
     { name: 'svg_20', value: 65 },
122.  
     { name: 'svg_21', value: 65 },
123.  
     { name: 'svg_22', value: 85 },
124.  
     { name: 'svg_23', value: 75 },
125.  
     { name: 'svg_24', value: 65 },
126.  
     { name: 'svg_25', value: 55 },
127.  
     { name: 'svg_26', value: 45 },
128.  
     { name: 'svg_27', value: 85 },
129.  
     { name: 'svg_28', value: 15 },
130.  
     { name: 'svg_29', value: 65 },
131.  
     { name: 'svg_30', value: 45 },
132.  
     { name: 'svg_31', value: 85 },
133.  
     { name: 'svg_32', value: 65 },
134.  
     {
135.  
     name: '北校区', value: 95,
136.  
     itemStyle: {
137.  
     color: 'rgba(255,0,0,0.1)',
138.  
     borderColor: 'rgba(255,0,0,1)',
139.  
     borderWidth: 3,
140.  
      
141.  
     }
142.  
     }
143.  
     ]
144.  
     }
145.  
     ]
146.  
     };
147.  
     myChart.setOption(option);
148.  
     });
149.  
      
150.  
     if (option && typeof option === 'object') {
151.  
     myChart.setOption(option);
152.  
     }
153.  
     window.addEventListener('resize', myChart.resize);
154.  
     </script>
155.  
      
156.  
     </section>

当然首先，我们得先有SVG文件，可以通过以下网址在线绘制：

SVG 在线编辑器

可以自己导入背景图，这里我自己做了一张卫星图。 

每个建筑都用一个闭合的线条框起来，我是用钢笔工具来画的。注意每个颜色的内部都可以预先填充一种颜色，透明度建议100%，因为在echarts中是可以进行调整的，但是只能降低原有透明度，而不能在原有的透明度值上增加。

画好以后，保存为svg文件，用代码编辑器打开，可以看到里面除了背景图base64代码以外，就是一个个<path>标签。

1.  
   <path
2.  
   //填充颜色
3.  
   fill="#20cccc"
4.  
   //边框颜色
5.  
   stroke="#f90929"
6.  
   //边框线条大小
7.  
   stroke-width="6"
8.  
   //边框透明度
9.  
   stroke-opacity="null"
10.  
    //边框虚线风格设置
11.  
    stroke-dasharray="5,2,2,2,2,2"
12.  
    //填充透明度，如需在使用效果中显示和调整，该项目值必须大于0
13.  
    fill-opacity="0"
14.  
    //整体透明度
15.  
    opacity="0.5"
16.  
    //路径点
17.  
    d="m2319.14899,1463.82976"
18.  
     
19.  
    id="svg_12"
20.  
    //必须包含name属性，echarts才能够识别显示
21.  
    name="svg_12"
22.  
     
23.  
    /> 

总结

有两个小坑，一个是svg元素必须设置name属性，才能在echarts中显示出来。二是如果要使echarts元素中的 areaColor设置起作用，必须在编辑制作SVG文件的时候将元素的填充透明度“fill-opacity”设置为大于0。

这篇好文章是转载于：学新通技术网