option = {
option = {
color : [
'rgba(255, 69, 0, 0.5)',
'rgba(255, 150, 0, 0.5)',
'rgba(255, 200, 0, 0.5)',
'rgba(155, 200, 50, 0.5)',
'rgba(55, 200, 100, 0.5)'
],
title : {
text: '商业BI类图表',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
data : ['展现','点击','访问','咨询','订单']
},
series : [
{
name:'业务指标',
type:'gauge',
center: ['25%','55%'],
splitNumber: 10, // 分割段数,默认为5
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 8
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length :12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔线
show: true, // 默认显示,属性show控制显示与否
length :30, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer : {
width : 5
},
title : {
show : true,
offsetCenter: [0, '-40%'], // x, y,单位px
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder'
}
},
detail : {
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto',
fontWeight: 'bolder'
}
},
data:[{value: 50, name: '完成率'}]
},
{
name:'预期',
type:'funnel',
x: '45%',
width: '45%',
itemStyle: {
normal: {
label: {
formatter: '{b}预期'
},
labelLine: {
show : false
}
},
emphasis: {
label: {
position:'inside',
formatter: '{b}预期 : {c}%'
}
}
},
data:[
{value:60, name:'访问'},
{value:40, name:'咨询'},
{value:20, name:'订单'},
{value:80, name:'点击'},
{value:100, name:'展现'}
]
},
{
name:'实际',
type:'funnel',
x: '45%',
width: '45%',
maxSize: '80%',
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 2,
label: {
position: 'inside',
formatter: '{c}%',
textStyle: {
color: '#fff'
}
}
},
emphasis: {
label: {
position:'inside',
formatter: '{b}实际 : {c}%'
}
}
},
data:[
{value:30, name:'访问'},
{value:10, name:'咨询'},
{value:5, name:'订单'},
{value:50, name:'点击'},
{value:80, name:'展现'}
]
}
]
};