今天研究了下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]}
]
]
}
}
]
});
}
);