| var svg = `<?xml version="1.0" encoding="utf-8"?> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.2" fill-rule="evenodd" xml:space="preserve" |
| viewBox="-180 0 610 300"> |
| <g name="name_a"> |
| <path d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765" /> |
| <path d="M 150,0 L 150,100 250,100 250,0 Z" fill="#765" /> |
| </g> |
| <path name="name_b" d="M -80,200 L -80,300 20,300 20,200 Z" fill="#567" /> |
| <path name="name_b" d="M 230,200 L 230,300 330,300 330,200 Z" fill="#567" /> |
| </svg> |
| `; |
| |
| echarts.registerMap('simple_svg', { svg: svg }); |
| |
| option = { |
| geo: { |
| map: 'simple_svg', |
| regions: [{ |
| name: 'name_a', |
| label: { |
| formatter: [ |
| 'This two rects are wrapped in a <g name="...">', |
| 'So a single label is displayed in the center', |
| 'of the bounding rect of the <g>' |
| ].join('\n'), |
| backgroundColor: 'rgba(0,0,0,0.2)', |
| padding: 5 |
| } |
| }, { |
| name: 'name_b', |
| label: { |
| formatter: [ |
| 'This two rects are named', |
| 'with the same name.', |
| 'So each of them has a label.' |
| ].join('\n'), |
| backgroundColor: 'rgba(0,0,0,0.2)', |
| padding: 5 |
| } |
| }] |
| } |
| }; |