echarts加载地图svg
地图是自己通过png文件转换过来的，网上的转换工具有点瑕疵，字体稍微有点偏差（svn相关元素一定要有name元素不然echarts地图加载不出来）
- png转svg连接地址：
https://png2svg.com/zh/
https://www.bejson.com/convert/image_to_svg/
- 阿里云获取地图json地址
（阿里云也没有很详细，具体街道什么的都没有，需要自己画）：
https://datav.aliyun.com/portal/school/atlas/area_selector
- 其他参考学习连接：
https://www.jianshu.com/p/b9d418095181
https://blog.csdn.net/2301_78542842/article/details/139608529
https://juejin.cn/post/7181746338018066489（这个是vue框架的，本文不用vue）
https://blog.csdn.net/qq_41630414/article/details/121750726
- 相关代码：
<div id="map" style="width: 1200px; height: 800px;"></div>
<script type="text/javascript" src="${ctx}/luckysheetJs/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('map'));
//通过jqeury的get方法获取svg文件，并执行回调函数function (svg){}
$.get('${ctx}/js/ytd/platform/ycgdj/yangchun.svg', function (svg) {
echarts.registerMap('yangchun', {
svg: svg });//注册地图
option = {
// 鼠标移动至svg元素上会弹出来的提示框
tooltip: {
//可以格式化其显示的内容，可以使用回调函数，详见说明文档
formatter: '{b0}: {c0}<br />'
},
// 以下部分为原示例的根据svg元素(data)的value的值而进行颜色渐变显示，这里用不到
visualMap:
{
left: 'center',
bottom: '10%',
min: 5,
max: 100,
orient: 'horizontal',
text: ['', '预警等级'],
realtime: true,
calculable: true,
inRange: {
color: ['#00dd00', '#db6e00', '#cf0000']
}
},
// 以上部分为原示例的根据svg元素(data)的value的值而进行颜色渐变显示，这里用不到
//对数据列的设置
series: [
{
name: 'yangchun',//数据列的名称
type: 'map',//数据列的类别
map: 'yangchun',//数据列所要绑定的地图
roam: true,//是否允许放大
//数据列的显示样式
itemStyle: {
color: 'Yellow',//颜色设置，在我使用的自己绘制的SVG图中，这个设置项可以对svg元素的填充色不起作用
borderColor: 'rgba(255,255,0,0.1)',//边框颜色设置
borderWidth: 2,//边框粗细设置
areaColor: 'rgba(255,0,0,0)',//区域颜色设置，在我使用的自己绘制的SVG图中，这个设置项可以对svg元素的填充色进行设置，前提是svg元素在绘制的时候填充颜色不透明度要大于0
},
//高亮显示的设置
emphasis: {
label: {
show: false //不显示标签
},
//高亮时的样式显示
itemStyle: {
borderColor: 'Yellow',
areaColor: 'rgba(255,0,0,0.5)',
borderWidth: 2,
borderType: 'solid'
}
},
selectedMode: false,//关闭选择模式，即图元为不可选择状态。开启时，同样可以对元素被选中后的样式等进行设置
// 以下为测试数据
data: [
//这里的name为svg文件中元素的name属性，很多svg编辑器绘制的svg文件是没有name属性的，必须得自己加上去。
{
name: 'heLang', value: 1 },
{
name: 'shiWang', value: 20 },
{
name: 'songBo', value: 30 },
{
name: 'kuiGang', value: 25 },
{
name: 'chunWan', value: 50 },
{
name: 'poMian', value: 60 },
{
name: 'heShui', value: 50 },
{
name: 'suiNIng', value: 80 },
{
name: 'maShui', value: 50 },
{
name: "chunCheng", value: 50 },
{
name: "sanJia", value: 11 },
/* {
//每个元素都可以单独设置其itemStyle、emphasis、tooltip等参数，且该节点的参数设置会覆盖全局的设置。
name: 'sanJia', value: 11,
itemStyle: {
color: 'rgb(255,255,255)',
borderColor: 'rgba(255,0,0,1)',
borderWidth: 3
}
}, */
{
name: 'tanShui', value: 60 },
{
name: 'gangMei', value: 3 },
{
name: 'shuangQiao', value: 90 },
{
name: 'heKou', value: 85 },
{
name: 'baJia', value: 5 }
]
}
]
};
myChart.setOption(option);
});
</script>
- svg代码：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1150px" height="1146px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path name="heLang" style="opacity:0.975" fill="#00af4f" d="M 671.5,154.5 C 676.562,155.615 681.062,157.949 685,161.5C 686.704,165.741 688.538,169.907 690.5,174C 693.871,175.068 697.204,176.235 700.5,177.5C 701.946,182.492 702.28,187.492 701.5,192.5C 697.799,194.012 694.466,196.012 691.5,198.5C 693.134,203.037 694.134,207.704 694.5,212.5C 690.832,213.556 687.165,214.722 683.5,216C 679.848,216.499 676.182,216.665 672.5,216.5C 672.176,220.555 672.509,224.555 673.5,228.5C 677.19,229.194 680.857,230.028 684.5,231C 687.833,234.333 691.167,237.667 694.5,241C 698.493,241.17 702.493,241.004 706.5,240.5C 708.735,249.702 711.068,258.868 713.5,268C 708.999,275.676 703.332,282.343 696.5,288C 691.407,291.689 685.74,293.356 679.5,293C 676.333,289.167 673.167,285.333 670,281.5C 669.501,276.845 669.334,272.179 669.5,267.5C 666.101,268.016 662.768,268.85 659.5,270C 656.914,273.836 654.581,277.836 652.5,282C 646.401,281.107 640.235,280.274 634,279.5C 628.818,279.504 623.985,280.837 619.5,283.5C 616.806,287.554 614.639,291.888 613,296.5C 609.167,300.333 605.333,304.167 601.5,308C 597.5,308.333 593.5,308.667 589.5,309C 578.833,316 568.167,323 557.5,330C 556.365,330.749 555.365,330.583 554.5,329.5C 551.292,325.462 548.292,321.296 545.5,317C 551.34,310.732 558.007,305.399 565.5,301C 572.318,293.513 577.485,285.013 581,275.5C 581.753,270.625 581.586,265.792 580.5,261C 586.114,253.051 592.781,246.051 600.5,240C 614.092,233.737 625.259,224.57 634,212.5C 638.667,208.5 643.333,204.5 648,200.5C 650.71,196.247 653.543,192.08 656.5,188C 655.067,183.562 654.233,179.062 654,174.5C 659.297,167.369 665.13,160.703 671.5,154.5 Z"/></g>
<g><path name="shiWang" style="opacity:0.968" fill="#fde400" d="M 769.5,214.5 C 770.239,214.369 770.906,214.536 771.5,215C 778.928,222.022 784.762,230.189 789,239.5C 792.328,242.333 795.995,244.666 800,246.5C 801.166,250.997 802.333,255.497 803.5,260C 800.547,262.816 797.213,265.149 793.5,267C 789.95,270.883 786.783,275.049 784,279.5C 783.575,283.869 783.908,288.203 785,292.5C 787.167,297.5 789.333,302.5 791.5,307.5C 787.8,309.456 783.967,311.123 780,312.5C 776.064,310.235 772.397,307.568 769,304.5C 763.154,312.861 757.82,321.528 753,330.5C 749.435,328.633 745.935,326.633 742.5,324.5C 741.19,314.381 737.523,305.215 731.5,297C 722.515,293.401 716.182,287.068 712.5,278C 715.618,273.879 719.118,270.046 723,266.5C 724.535,262.227 725.869,257.894 727,253.5C 740.249,247.918 749.916,238.585 756,225.5C 760.478,221.695 764.978,218.028 769.5,214.5 Z"/></g>
<g><path style="opacity:1" fill="#04160d" d="M 630.5,236.5 C 630.5,237.167 630.5,237.833 630.5,238.5C 627.953,239.834 626.286,239.001 625.5,236C 625.833,235.5 626.167,235 626.5,234.5C 627.86,235.18 629.193,235.847 630.5,236.5 Z"/></g>
<g><path style="opacity:1" fill="#01511f" d="M 646.5,238.5 C 646.804,237.85 647.137,237.183 647.5,236.5C 642.167,235.167 636.833,235.167 631.5,236.5C 635.445,237.491 639.445,237.824 643.5,237.5C 643.821,243.026 643.488,248.36 642.5,253.5C 642.5,248.5 642.5,243.5 642.5,238.5C 638.5,238.5 634.5,238.5 630.5,238.5C 630.5,237.833 630.5,237.167 630.5,236.5C 636.074,234.547 642.074,233.88 648.5,234.5C 648.843,236.483 648.176,237.817 646.5,238.5 Z"/></g>
<g><path style="opacity:1" fill="#030d09" d="M 661.5,248.5 C 662.485,244.366 662.818,240.032 662.5,235.5C 665.5,235.5 668.5,235.5 671.5,235.5C 671.5,242.167 671.5,248.833 671.5,255.5C 670.01,257.28 668.01,257.946 665.5,257.5C 665.5,256.5 665.5,255.5 665.5,254.5C 666.5,254.5 667.5,254.5 668.5,254.5C 668.5,253.167 668.5,251.833 668.5,250.5C 667.022,250.238 665.689,250.571 664.5,251.5C 663.429,257.516 660.929,258.516 657,254.5C 654.95,255.791 652.783,256.291 650.5,256C 650.384,249.651 650.384,243.151 650.5,236.5C 651.5,236.5 652.5,236.5 653.5,236.5C 653.5,235.5 653.5,234.5 653.5,233.5C 655.737,234.449 658.071,235.116 660.5,235.5C 660.5,239.5 660.5,243.5 660.5,247.5C 658.167,247.5 655.833,247.5 653.5,247.5C 653.5,249.167 653.5,250.833 653.5,252.5C 654.675,252.719 655.675,252.386 656.5,251.5C 655.41,250.391 655.41,249.391 656.5,248.5C 658.258,249.128 659.758,250.128 661,251.5C 661.483,250.552 661.649,249.552 661.5,248.5 Z"/></g>
<g><path style="opacity:1" fill="#044026" d="M 671.5,255.5 C 671.5,248.833 671.5,242.167 671.5,235.5C 668.5,235.5 665.5,235.5 662.5,235.5C 662.818,240.032 662.485,244.366 661.5,248.5C 661.5,243.833 661.5,239.167 661.5,234.5C 665.167,234.5 668.833,234.5 672.5,234.5C 672.825,241.687 672.491,248.687 671.5,255.5 Z"/></g>
<g><path style="opacity:1" fill="#02090a" d="M 646.5,238.5 C 646.666,244.176 646.499,249.843 646,255.5C 643.519,257.314 640.685,257.98 637.5,257.5C 637.5,256.5 637.5,255.5 637.5,254.5C 639.415,254.784 641.081,254.451 642.5,253.5C 643.488,248.36 643.821,243.026 643.5,237.5C 639.445,237.824 635.445,237.491 631.5,236.5C 636.833,235.167 642.167,235.167 647.5,236.5C 647.137,237.183 646.804,237.85 646.5,238.5 Z"/></g>
<g><path style="opacity:1" fill="#01a546" d="M 653.5,238.5 C 654.978,238.238 656.311,238.571 657.5,239.5C 656.833,239.833 656.167,240.167 655.5,240.5C 654.287,240.253 653.62,239.586 653.5,238.5 Z"/></g>
<g><path style="opacity:1" fill="#018c3a" d="M 665.5,237.5 C 666.833,237.5 668.167,237.5 669.5,237.5C 669.5,238.833 669.5,240.167 669.5,241.5C 668.167,241.5 666.833,241.5 665.5,241.5C 665.5,240.167 665.5,238.833 665.5,237.5 Z"/></g>
<g><path style="opacity:1" fill="#004706" d="M 632.5,240.5 C 631.911,244.971 632.577,248.971 634.5,252.5C 633.791,253.404 632.791,253.737 631.5,253.5C 631.182,248.968 631.515,244.634 632.5,240.5 Z"/></g>
<g><path style="opacity:1" fill="#000701" d="M 632.5,240.5 C 635.167,240.5 637.833,240.5 640.5,240.5C 640.5,244.167 640.5,247.833 640.5,251.5C 638.265,251.205 636.265,251.539 634.5,252.5C 632.577,248.971 631.911,244.971 632.5,240.5 Z"/></g>
<g><path style="opacity:1" fill="#04120d" d="M 625.5,240.5 C 627.138,241.657 628.804,242.824 630.5,244C 628.697,247.071 626.863,246.904 625,243.5C 624.53,242.423 624.697,241.423 625.5,240.5 Z"/></g>
<g><path style="opacity:1" fill="#049c4b" d="M 634.5,243.5 C 635.5,243.5 636.5,243.5 637.5,243.5C 637.5,245.167 637.5,246.833 637.5,248.5C 636.5,248.5 635.5,248.5 634.5,248.5C 634.5,246.833 634.5,245.167 634.5,243.5 Z"/></g>
<g><path style="opacity:1" fill="#019840" d="M 653.5,243.5 C 654.978,243.238 656.311,243.571 657.5,244.5C 656.833,244.833 656.167,245.167 655.5,245.5C 654.287,245.253 653.62,244.586 653.5,243.5 Z"/></g>
<g><path style="opacity:1" fill="#009b46" d="M 665.5,243.5 C 666.5,243.5 667.5,243.5 668.5,243.5C 668.5,244.833 668.5,246.167 668.5,247.5C 667.5,247.5 666.5,247.5 665.5,247.5C 665.5,246.167 665.5,244.833 665.5,243.5 Z"/></g>
<g><path style="opacity:1" fill="#04110d" d="M 626.5,247.5 C 627.5,247.5 628.5,247.5 629.5,247.5C 629.704,251.22 628.704,254.553 626.5,257.5C 625.692,257.192 625.025,256.692 624.5,256C 625.713,253.313 626.38,250.48 626.5,247.5 Z"/></g>
<g><path style="opacity:1" fill="#1f1503" d="M 767.5,261.5 C 767.5,262.5 767.5,263.5 767.5,264.5C 765.833,264.5 764.167,264.5 762.5,264.5C 762.351,265.552 762.517,266.552 763,267.5C 764.011,266.663 765.178,266.33 766.5,266.5C 766.5,267.5 766.5,268.5 766.5,269.5C 764.784,269.629 763.117,269.962 761.5,270.5C 761.167,270.5 760.833,270.5 760.5,270.5C 759.525,267.689 758.858,264.689 758.5,261.5C 759.552,261.649 760.552,261.483 761.5,261C 761.167,260.667 760.833,260.333 760.5,260C 761.416,259.626 762.25,259.126 763,258.5C 763.589,260.863 765.089,261.863 767.5,261.5 Z"/></g>
<g><path style="opacity:1" fill="#0a0700" d="M 768.5,259.5 C 772.5,259.5 776.5,259.5 780.5,259.5C 781.08,263.649 780.414,267.316 778.5,270.5C 776.833,270.5 775.167,270.5 773.5,270.5C 774.718,269.839 776.051,269.172 777.5,268.5C 774.431,266.97 772.098,267.637 770.5,270.5C 769.833,270.5 769.167,270.5 768.5,270.5C 768.371,267.143 768.371,263.477 768.5,259.5 Z"/></g>
<g><path style="opacity:1" fill="#130e01" d="M 734.5,260.5 C 741.833,260.5 749.167,260.5 756.5,260.5C 756.5,261.5 756.5,262.5 756.5,263.5C 752.486,263.334 748.486,263.501 744.5,264C 743.707,265.085 743.04,266.252 742.5,267.5C 746.445,268.491 750.445,268.824 754.5,268.5C 754.5,273.167 754.5,277.833 754.5,282.5C 749.167,281.167 743.833,281.167 738.5,282.5C 738.813,279.753 738.48,277.086 737.5,274.5C 735.678,275.429 734.345,274.762 733.5,272.5C 736.55,270.451 738.883,267.784 740.5,264.5C 738.604,263.534 736.604,263.201 734.5,263.5C 734.5,262.5 734.5,261.5 734.5,260.5 Z"/></g>
<g><path style="opacity:1" fill="#b0a400" d="M 771.5,261.5 C 773.604,261.201 775.604,261.534 777.5,262.5C 776.5,262.833 775.5,263.167 774.5,263.5C 772.97,263.36 771.97,262.693 771.5,261.5 Z"/></g>
<g><path style="opacity:1" fill="#b0a400" d="M 771.5,264.5 C 773.604,264.201 775.604,264.534 777.5,265.5C 776.5,265.833 775.5,266.167 774.5,266.5C 772.97,266.36 771.97,265.693 771.5,264.5 Z"/></g>
<g><path style="opacity:1" fill="#dbca00" d="M 773.5,270.5 C 772.5,271.833 771.5,271.833 770.5,270.5C 772.098,267.637 774.431,266.97 777.5,268.5C 776.051,269.172 774.718,269.839 773.5,270.5 Z"/></g>
<g><path style="opacity:1"