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

Posted 2020-10-03

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

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

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

 

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

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

title: {                         //有尝试过，标题图层在饼图图层之上
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: {   //看到有讲是设置地图(map)值变化颜色(visualMap)，觉得有道理，不过缩略图更有道理
show: false,   //左下角缩略图，是一个色条，应该表示的是最深色到最浅色，先写到这，回去睡觉
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name:‘访问来源‘,
type:‘pie‘,
radius : ‘55%‘,
center: [‘50%‘, ‘50%‘],
data:[
{value:335, name:‘直接访问‘},
{value:310, name:‘邮件营销‘},
{value:274, name:‘联盟广告‘},
{value:235, name:‘视频广告‘},
{value:400, name:‘搜索引擎‘}
].sort(function (a, b) { return a.value - b.value; }),
roseType: ‘radius‘,
label: {
normal: {
textStyle: {
color: ‘rgba(255, 255, 255, 0.3)‘
}
}
},
labelLine: {
normal: {
lineStyle: {
color: ‘rgba(255, 255, 255, 0.3)‘
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: ‘#c23531‘,
shadowBlur: 200,
shadowColor: ‘rgba(0, 0, 0, 0.5)‘
}
},

animationType: ‘scale‘,
animationEasing: ‘elasticOut‘,
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};