echarts⽀持svg格式
今天研究了下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.ElementById('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]}
svg图],
[
{name:'2', geoCoord:[753.373, 186.983]},
{name:'1', geoCoord:[156.467, 296.913]}
]
]
}
}
]
});
}
);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。