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.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]}
                                    ]
                                ]
                            }
                        }
                    ]
                });
              }
      ); 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM