echarts怎么动态设置svg的路径

邹胖胖

我看了下案例，如果我要加载svg图。是在source的echart-all.js中去声明一个svg，但是我这边是要动态加载不同的svg图，我按照echart官网的文档来做是不生效的，请问要怎么设置？

liangyongfei

看得哪个案例？？
关于 svg 的用法，请参考
http://www.w3school.com.cn/svg/svg_inhtml.asp

如果想做动态绑定！建议绑定data组件中的字段！，通过修改data字段的值就可以动态修改图片的显示了！
用法类似http://docs.wex5.com/wex5-ui-question-list-2086

标签自定义 bind-attr-src 绑定data字段就可以！

邹胖胖

liangyongfei 发表于 2017-8-10 10:47
看得哪个案例？？
关于 svg 的用法，请参考
http://www.w3school.com.cn/svg/svg_inhtml.asp

这种应该不行，因为我要在svg设置markpoint，然后还有点击事件，所以要在echart中做，正常的应该是在使用echart的代码中加入这段：
require('echarts/util/mapData/params').params.bodyFemale = {
    getGeoJson: function (callback) {
        $.ajax({
            url: "svg/body-female.svg",
            dataType: 'xml',
            success: function(xml) {
                callback(xml)
            }
        });
    }
}
这样就可以动态加载我的svg，但是这段放在wex5中不生效，因为在wex5中是加载这句：
var mapParams = require('$UI/demo/misc/echarts/util/mapData/params');
然后在series中mapType的值只能是echart-all.js中预先定义好的,比如：
baiduBuilding： {
    getGeoJson: function (callback) {
        $.ajax({
            url: "svg/baidu-building.svg",
            dataType: 'xml'
        });
    }
}，mapType的值就可以是baiduBuilding，感觉你们是写死的只能从这里面取值，是我没有找对方法吗？

liangyongfei

邹胖胖 发表于 2017-8-10 11:20
这种应该不行，因为我要在svg设置markpoint，然后还有点击事件，所以要在echart中做，正常的应该是在使用 ...

var mapParams = require('$UI/demo/misc/echarts/util/mapData/params');

参考上边的那种写法，在onLoad 事件中，使用它类似的代码执行不可以吗？

1. mapParams.params.bodyFemale = {
   
2.     getGeoJson: function (callback) {
   
3.         $.ajax({
   
4.             url: "svg/body-female.svg",
   
5.             dataType: 'xml',
   
6.             success: function(xml) {
   
7.                 callback(xml)
   
8.             }
   
9.         });
   
10.     }
    
11. }

复制代码

邹胖胖

liangyongfei 发表于 2017-8-10 13:50
var mapParams = require('$UI/demo/misc/echarts/util/mapData/params');

参考上边的那种写法，在onLoa ...

它告诉我connot read property ‘getGeoJson’ of undefined，我看了下大概明白了。它是从source目录下的echarts-all中去加载定义好的mapType（假设serise中的mapType：baiduBuilding），因为echarts-all中没有定义baiduBuilding，所以就出现了connot read property ‘getGeoJson’ of undefined。我的想法是先在echarts-all中定义一个名为baiduBuilding的mapType，然后在我的页面中使用var mapParams = require('$UI/demo/misc/echarts/source/echarts-all');然后用mapParams.params.baiduBuilding.getGeoJson = function(...)，然后就可以动态去修改svg的url，但是啊require('$UI/demo/misc/echarts/source/echarts-all')引用过来是未定义的，我看了下源码，不是用的defined（'',[]）,所以就引用不了吗？

liangyongfei

邹胖胖 发表于 2017-8-10 14:30
它告诉我connot read property ‘getGeoJson’ of undefined，我看了下大概明白了。它是从source目录下的e ...

使用js的其他方式引用试试
http://doc.wex5.com/js-module-01/

如果js中真的存在js对象！就应该有才对的！要不试试 等待初始化
http://docs.wex5.com/wex5-ui-question-list-2104

你需要得到 baiduBuilding  对象才可以调用！

邹胖胖

liangyongfei 发表于 2017-8-10 18:18
使用js的其他方式引用试试
http://doc.wex5.com/js-module-01/

用不了啊，因为mapParams 是放在define里面的，我取不到。我换成了echart官方文档上的写法：
    var mapParams = require('echarts/util/mapData/params');
    mapParams.params.bodyFemale = {
        getGeoJson: function (callback) {
            $.ajax({
                url: "svg/body-female.svg",
                dataType: 'xml',
                success: function(xml) {
                    callback(xml)
                }
            });
        }
    }
一样的写法，我在web端中使用，系统就会去params.js中去查找我自定义的类型bodyFemale ，并且成功加载出我自定义的svg图。但是在wex5中直接去的map.js中去查找bodyFemale 的，我试着去加载‘香港’的地图，测试发现在wex5中js是从map.js中去查找的，就算没有param.js，香港地图还是会出来，但是把map.js中的‘香港’删除，页面上就没有地图了。请问你们知道原因吗？为什么走的map.js而不是params.js？

邹胖胖

邹胖胖 发表于 2017-8-11 11:21
用不了啊，因为mapParams 是放在define里面的，我取不到。我换成了echart官方文档上的写法：
    var mapP ...

问题解决！耶！！
使用svg直接完全按照echarts文档上那样写就行了，只是需要注意两个地方：
1.wex5中的require与js自身的require不一样，所以在wex5的js页面的最开端（define之前）要将js的require存在一个变量里：requirejs = require；在下面使用echarts的地方，文档上不是使用了很多require，这里的require就是js自身的那个require，所以要替换成requirejs，也就是我们之前存的那个变量；这样就OK啦！
2.
requirejs([
    "echart",
    "echart/chart/map"
]
    var mapParams = requirejs('echarts/util/mapData/params');
    mapParams.params.bodyFemale = {
         getGeoJson: function (callback) {
             $.ajax({
                 url: "svg/body-female.svg",
                 dataType: 'xml',
                 success: function(xml) {
                     callback(xml)
                 }
             });
         }
     }
    //...
)
这里的'echarts/util/mapData/params'引用的其实不是params.js那个js文件，而是map文件中定义的一个模块的ID，所以我们自定义的图标类型其实都是从map中define（'echarts/util/mapData/params'）这个模块中去加载的，跟params.js一毛钱关系都没有。