今天研究了下echarts的svg格式。发现用ai生成svg格式的图片，echarts上面显示不了。
经过了多次的百度和谷歌终于找到了用Method Draw画出来的svg格式，echarts就能加载出来。
现附上用echarts加载的svg的方法
链接地址：
足球例子
在echart下面的util包下的mapData的params.js找到mapParams object下面加上
var mapParams = {
'football' : {
getGeoJson: function (callback) {
$.ajax({
url : 'images/football.svg',
dataType: 'xml',
success: function(xml) {
callback(decode(xml))
}
})
}
}
//省略代码
｝
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map',
'echarts/util/mapData/params'
],
function (ec) {
var myChart = ec.init(document.getElementById('priceWarming'));
myChart.setOption( {
// backgroundColor:'#228b22',
title : {
text : '2014世界杯',
subtext: '地图SVG扩展',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: '2014世界杯',
type: 'map',
mapType: 'football', // 自定义扩展图表类型
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
],
textFixed : {
'球门区1' : [0, -20],
'球门区2' : [0, -20],
'禁区1' : [10, 20],
'禁区2' : [-10, 20],
'禁区弧线1' : [0, -20],
'禁区弧线2' : [0, -20],
'中圈' : [0, -20],
'开球点' : [0, 20]
},
markPoint : {
symbol:'circle',
symbolSize : 20,
effect : {
show: true,
color: 'lime'
},
data : [
{name: '开球点', value: 100, geoCoord:[425.126, 296.913]}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
color: 'gold',
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'1', geoCoord:[96.879, 186.983]},
{name:'2', geoCoord:[693.786, 297.939]}
],
[
{name:'2', geoCoord:[753.373, 186.983]},
{name:'1', geoCoord:[156.467, 296.913]}
]
]
}
}
]
});
}
);