echarts 有关饼形图和map的使用技巧1(饼图)

http://blog.csdn.net/yhn1121/article/details/52041742 先上个链接，百度无意间搜到的，写得比我全面，可以直接飞去看它；

之前写网页用过echarts，中间有比较多不懂的地方，写完之后用比较清闲的时间试了一下官方示例中 南丁格尔玫瑰图即Customized Pie 中各个代码所控制的部分，整理了一下

后期还会陆续补充，说不定后来就比链接里那个哥们写的全面了呢（可惜没有表情，手动斜眼）

还得一个斜眼，因为突然看到了echarts的说明文档，链接造福人类   http://echarts.baidu.com/option.html#series-pie.label

下面是官方实例的代码：我会在后面以注释的形式进行标注

option = {
backgroundColor: '#2c343c',

//很显然这就是官方示例中外面的那一块大的黑色背景，还可以自己更改颜色，随你喜欢； 下面还有阴影部分和饼图大小与位置的控制代码，敬请期待

title: {

//有尝试过设置奇特的position，标题图层在饼图图层之上
text: 'Customized Pie',

//这个是最上面的大标题，空的话标题会消失，当然也可以换成你喜欢的任意标题
left: 'center',

//很显然，这个是标题的对齐方式，支持纯数字和px的形式
top: 20,

//距顶部距离，不支持px形式
textStyle: {
color: '#ccc'

//标题颜色，textStyle可能还有其他的属性，没有尝试     end
}
},

tooltip : {

//当鼠标悬停于饼图时出现的数据详情框
trigger: 'item',

//据说有'item'与axis两种取值，尝试过饼图中axis无效，数据详情框会消失，据说在柱状图中会有作用，只是并没有尝试
formatter: "{a} <br/>{b} : {c} ({d}%)"

//数据详情框的数据{a}代表series中的name <br/>换行，{b}为data.name  {c}为data.value  {d}为占总数的百分比
},

visualMap: {

//看到有讲是设置图值变化颜色(visualMap)，觉得有道理，不过这个其实就是左下角的色彩条设置
show: false,

//左下角缩略图，是一个色条，应该表示的是最深色到最浅色，有两个可能的取值，true和false,true为显示色条，false为隐藏色条
min: 80,
max: 600,

//当min==max时，饼图颜色均匀，实例为红色，当然试了一下min和max的值具体指的是什么不是很理解
inRange: {
colorLightness: [0, 1]

//该值为颜色的明暗度，具体可以参见左下角色条，色条底部坐标值为0，顶部为1
}
},
series : [
{
name:'访问来源',

//显示在数据详情框中的一部分，实例中是第一行的内容
type:'pie',

//饼形图默认是pie, 据我观察所有的饼图不管是南丁格尔，还是环形还是嵌套环形，type值都是pie
radius : '55%',

//饼图直径与背景的比值，可以在背景大小不变的情况下缩放饼形图的大小
center: ['50%', '50%'],

//饼图圆心的位置，不同的是，前者是left 后者是top
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:274, name:'联盟广告'},
{value:235, name:'视频广告'},
{value:400, name:'搜索引擎'}

// 此几者为饼形图数据，会随着比重变化半径与颜色，当然，min与max设置可以使其颜色不变

//，另外半径变化不知道由哪个参数控制，后面也知道了，就是series-rosetype
].sort(function (a, b) { return a.value - b.value; }),

//数据的排序，使用了.sort()与function（a,b）{}函数，可见最下方解释
roseType: 'radius',

//有两个取值，①'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。  ② 'area'所有扇区圆心角相同，仅通过半径展现数据大小。
label: {

//外部指示线的文本标签
normal: {

//有两种可能的取值，normal 和 emphasis（强调; 着重; （轮廓、图形等的） 鲜明; 突出，重读;）括号内的是英语意思，而我看了一下说明文档，这两个取值normal有position取值而emphasis没有，其它属性大致相同

textStyle: {

//标签的字体样式。   包括color，fontStyle，fontWeight，fontFamily，fontSize 等属性

color: 'rgba(255, 255, 255, 0.3)'

//标签字体颜色
}
}
},
labelLine: {

//标签的视觉引导线样式
normal: {

//与label类似也有两种可能的取值，normal 和 emphasis 其属性区别较大 emphasis时不存在smooth，length，length2三个属性
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'

//引导线颜色，还有多种样式
},
smooth: 0.2,

//视觉引导线弯曲程度，0为直线加拐角，1为完全的曲线，弯曲程度可以自己去试
length: 10,
length2: 20

//上两者为两条直线分别的长度，单位不一致，具体不清楚
}
},
itemStyle: {

//图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；

　　　　　　　

//emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
normal: {   
color: '#c23531',

//就如上面所说这个属性时图形在默认状态下的颜色，

//不过我发现了一个神奇的事情，如果引号内为空，那么颜色为五彩，当然引号不能去掉，否则会报错
shadowBlur: 200,

//这个就是饼图阴影的控制属性，数字越大阴影越宽，可以为0，没有阴影，但是不能为空
shadowColor: 'rgba(0, 0, 0, 0.5)'

//这个是阴影的透明度和颜色，颜色来说的话可以用三种方式来表示：rgba；#；red；后两者时支持opacity属性
}
},

animationType: 'scale',

//初始动画效果，可选 ：①expansion默认研圆弧展开的效果。②scale缩放效果，配合设置 animationEasing='elasticOut' 可以做成 popup 的效果。

animationEasing: 'elasticOut',

//初始动画的缓动效果   匀速，先快后慢先慢后快等等，一个链接    http://echarts.baidu.com/gallery/editor.html?c=line-easing
animationDelay: function (idx) {

//初始动画的延迟，有试过将实例中的下面一个参数扩大十倍，效果就非常明显
return Math.random() * 200;

// Math.random()     .random() 方法可返回介于 0 ~ 1 之间的一个随机数，语法为 Math.random()
}
}
]
};

sort() 方法用于对数组的元素进行排序。

语法为 arrayObject.sort(sortby)   即   [].sorrt()

其中sortby规定排序顺序。必须是函数。

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。

若想使其顺序为按数字大小进行排序则应如此写 [].sort(function (a, b) { return a - b;})，此时为升序，b-a为降序

popup:弹窗