//整个配置项代码如下
var mapBoxOption = {
tooltip: {
trigger: 'item',
// a是设置name,b是每一项的name,c是每一项的值,d是每一项的占比(echarts会自己给我们计算不需要我们传入)
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
//图例的配置
legend: {
// 垂直显示
orient: 'vertical',
// 左右的话在右边
right:"right",
// 上下的话在中间
top:"center",
// 图例的内容,要和series传入的data里的name保持一致
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
// 外面大环配置
{
// 上方{a}可以取到
name:'访问来源',
//左右和上下位置
center:["40%","50%"],
type:'pie',
// 内半径和外半径
radius: ['40%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
// 这里开启的话会出现所有的线
show: true,
// 线上的内容
formatter: '{d}%',
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
data:[
{
value:335,
name:'直接访问',
// 外环的线
labelLine:{
//是否显示自己的线
show:true,
// 第一根线的长度
length:10,
// 第二根线的长度
length2:10
},
// 自己这一块的颜色
itemStyle:{
color:"green"
}
},
//这几项我没加颜色用的默认的
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
},
// 内环的配置
{
radius: ['16%', '18%'],
center: ['40%','50%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data:[
{
value:100,
itemStyle:{
color:"#000"
}
}
]
}
]
}