先说明一下内部文件分布：
注意输入数组的格式（不是一般Javascript 的数组格式，而是有点像json 的样子），代码如下：
profiles_pie_weibo:function(event_id){
heats=[{name:'直达', value:335},{name:'营销广告', value:679},{name:'搜索引擎', value:1548}];
heats2 = [{name:'直达', value:335},{name:'邮件营销', value:310},{name:'联盟广告', value:234},{name:'视频广告', value:135},
{name:'百度', value:1048},{name:'谷歌', value:251},{name:'必应', value:147},{name:'谷歌', value:102}];
// echarts库文件路径配置
require.config({
paths: {
echarts: $base.appConfig.lib_scripts_path + '/echarts/'
}
});
// 使用图表
require(
[
'echarts',
'echarts/chart/pie'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('profiles_layout'));
var option = {
tooltip : { //鼠标hover时提示
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: '访问来源',
type:'pie',
radius: [0,'35%'], //内部饼图
itemStyle : {
normal : {
label : {
position : 'inner'
},
labelLine : {
show : false
}
}
},
data: heats
},
{
name: '访问来源2',
type:'pie',
radius: ['50%','70%'], //数组形式，环形图
data: heats2
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);//======end require=======
},
这个东西代码不难，但那个SVG底图的对应代码起着关键的影响，所以搞这个之前最好学一点SVG代码编写规则。好吧，做echarts SVG扩展的人还是比较少的，网上几乎找不到多少直接相关资料，只能自己摸弄着过河了~
代码（有一点点无用代码，不影响阅读）：
//人物画像
profiles_weibo_3:function(event_id){
// echarts库文件路径配置
require.config({
paths: {
echarts: $base.appConfig.lib_scripts_path + '/echarts/'
}
});
// 使用图表
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('profiles_layout'));
// 自定义扩展图表类型：mapType = body
require('echarts/util/mapData/params').params.bodyMale = {
getGeoJson: function (callback) {
$.ajax({
url: $base.appConfig.lib_scripts_path + "/echarts/svg/raw_man.svg",
dataType: 'xml',
success: function(xml) {
callback(xml);
},
error:function(XMLResponse){
alert(XMLResponse.responseText);
}
});
}
};
var option = {
title : {
text : '人体密码',
subtext: '地图SVG扩展',
x:'center'
},
tooltip : {
trigger: 'item'
},
dataRange: {
min: 0,
max: 100,
x: 'center',
y: 'center',
calculable : true,
itemHeight:30,
color: ['orangered','yellow','lightskyblue']
},
series : [
{
name: '人体密码-男',
type: 'map',
mapType: 'bodyMale', // 自定义扩展图表类型
mapLocation: {
x:'left'
},
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: 'head', value: 90},
{name: 'body', value: 60},
{name: 'left_hand', value: 70},
{name: 'right_hand', value: 50},
{name: 'left_leg', value: 40},
{name: 'right_leg', value: 30},
{name: 'bag', value: 90}
],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 5
},
data : [
[
{name:'男',geoCoord:[138, 126]},
{name:'女',value:90,geoCoord:[268, 56]}
]
]
}
}
]//======end series=======
};
myChart.setOption(option);
}
);//======end require=======
},
SVG Reference:
echarts sample：http://echarts.baidu.com/doc/example/map16.html?qq-pf-to=pcqq.c2c
echarts sample 中用到的SVG文件：https://code.csdn.net/u013476464/baidu_data_visualization/tree/master/doc/example/svg/body-male.svg
SVG扩展其他例子：http://www.oschina.net/code/piece_full?code=38878
SVG在线编辑：http://editor.method.ac/
SVG 学习：http://www.w3cplus.com/html5/svg-transformations.html，http://www.tuicool.com/articles/yUZz2mu
上面的例子用到我做的SVG文件。只是图片编辑工具是不够的，还需要修改里面的代码。另外，stroke 和fill 是不能加在需要作色彩变化的项上的，不然dataRange中的着色会不成功。代码如下：
<?xml version="1.0"?> <svg width="232" height="336" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g> <title>background</title> <rect fill="#fff" id="canvas_background" height="338" width="234" y="-1" x="-1"/> <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"> <!-- <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>--> </g> </g> <g> <title>Layer 1</title> <ellipse name="head" ry="39.5" rx="39" id="svg_1" cy="51" cx="116.5" stroke-width="1.5"/> <ellipse name="body" ry="66" rx="15" id="svg_2" cy="158.5" cx="116.5" stroke-width="1.5"/> <ellipse name="right_leg" ry="37.5" rx="10" id="svg_3" cy="268" cx="95.5" stroke-width="1.5"/> <ellipse name="left_leg" ry="48" rx="9.5" id="svg_4" cy="270.5" cx="144" stroke-width="1.5"/> <ellipse name="right_hand" ry="8.5" rx="41.5" id="svg_5" cy="144" cx="53" stroke-width="1.5"/> <ellipse name="left_hand" ry="9" rx="40.5" id="svg_6" cy="142.5" cx="187" stroke-width="1.5"/> <path id="svg_8" d="m91.5,43.5c12,2 18,-3 18,-3c0,0 -30,1 -18,3z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/> <path id="svg_9" d="m127.5,39.5c15,4 15,3 14.5,2.5c0.5,0.5 -29.5,-6.5 -14.5,-2.5z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/> <path id="svg_10" d="m99.5,68.5c0,-1 15,11 14.5,10.5c0.5,0.5 18.5,-9.5 18,-10" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/> <path id="svg_11" name="bag" d="m22.5,161.5c-10,17 -11,61 -11.5,60.5c0.5,0.5 14.5,28.5 14,28c0.5,0.5 13.5,-25.5 13,-26l-15.5,-62.5z"/> </g> </svg>
原文地址：http://blog.csdn.net/textboy/article/details/46360511
