• 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]}
                                        ]
                                    ]
                                }
                            }
                        ]
                    });
                  }
          ); 
    
  • 相关阅读:
    Android:短信发送
    Android 自制拍照软件
    Android 联系人的读取,查询,添加
    android activity生命周期
    android 让 EditText, TextView自动识别链接
    android Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)
    FileOutputStream 读文件的模式
    Android 使用 SharedPreferences 保存和加载软件参数
    使用google的GSON处理JSON
    Android SqlLite数据库的创建、增、删、改、查、使用事务
  • 原文地址:https://www.cnblogs.com/caijw/p/5418243.html
Copyright © 2020-2023  润新知