漏斗圖和金字塔
阿新 • • 發佈:2022-05-21
基本漏斗圖和金字塔
var option = { //指定圖表的配置項和資料
color: ['lightblue', 'rgba(0,150,0,0.5)', 'rgba(255,200,0,0.5)',
'rgba(155,200,50,0.5)', 'rgba(44,44,0,0.5)', 'rgba(33,33,30,0.5)',
'rgba(255,66,0,0.5)', 'rgba(155,23,31,0.5)', 'rgba(23,44,55,0.5)'],
//配置標題元件
title: { left: 270, top: 0, textStyle: { color: 'green' }, text: '漏斗圖' },
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba設定透明度0.1
tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c}%" }, //配置提示框元件
toolbox: {
left: 555, top: 0,
feature: {
dataView: { readOnly: false },
restore: {}, saveAsImage: {}
}
}, //配置工具箱元件
legend: {
left: 40, top: 30, data: ['瀏覽選購', '新增到購物車', '購物車結算',
'核對訂單資訊', '提交訂單', '選擇支付方式', '完成支付']
}, //配置圖例元件
calculable: true,
series: [ //配置資料系列
{
name: '漏斗圖', type: 'funnel ', left: '3%',
sort: 'descending', //金字塔:'ascending'; 漏斗圖:'descending'
top: 60, bottom: 60, width: '80%',
min: 0, max: 100,
minSize: '0%', //設定每一塊的最小寬度
maxSize: '100%', //設定每一塊的最大,一次去除掉尖角
gap: 2, //設定每一塊之間的間隔
label: { show: true, position: 'inside' }, //設定標籤顯示在裡面|外面
labelLine: {
length: 10, //設定每一塊的名字前面的線的長度
lineStyle: {
width: 1, //設定每一塊的名字前面的線的寬度
type: 'solid'//設定每一塊的名字前面的線的型別
}
},
itemStyle: {
normal: { //設定圖形在正常狀態下的樣式
label: { show: true, fontSize: 15, color: 'blue', position: 'inside', },
borderColor: '#fff', //設定每一塊的邊框顏色
borderWidth: 0, //設定每一塊邊框的寬度
shadowBlur: 50, //設定整個外面的陰影厚度
shadowOffsetX: 0, //設定每一塊的y軸的陰影
shadowOffsetY: 50, //設定每一塊的x軸的陰影
shadowColor: 'rgba(0,255,0,0.4)'//設定陰影顏色
}
},
//設定滑鼠hover時高亮樣式
emphasis: { label: { fontFamily: "楷體", color: 'green', fontSize: 28 } },
data: [ //設定在漏斗圖中展示的資料
{ value: 100, name: '瀏覽選購' }, { value: 60, name: '新增到購物車' },
{ value: 42, name: '購物車結算' }, { value: 25, name: '核對訂單資訊' },
{ value: 9, name: '提交訂單' }, { value: 4, name: '選擇支付方式' },
{ value: 2.5, name: '完成支付' },]
}
]
};
把圖表配置項中series中的sort取值由'descending'改為'ascending'就可以由漏斗圖變為金字塔了
多漏斗圖和金字塔
var option = { //指定圖表的配置項和資料
//使用預定義的顏色
color: ["red", 'green', 'blue', '#8CC7B5', '#32CD32', '#7CFC00', '#19CAAD', 'grey'],
title: {
text: '多漏斗圖和多金字塔', left: 280, top: 'top'
},
tooltip: { trigger: 'item', formatter: "{a} <br/>{b}:{c}%" },
toolbox: {
left: 750, top: 12,
orient: 'vertical', top: 'center',
feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} }
},
legend: {
orient: 'vertical', left: 'left',
left: 22, top: 12,
data: ['展現', '點選', '訪問', '諮詢', '訂單']
},
calculable: true,
series: [
{
name: '漏斗圖', type: 'funnel', width: '40%', height: '45%', left: '5%', top: '50%',
data: [
{ value: 60, name: '訪問' }, { value: 30, name: '諮詢' }, { value: 10, name: '訂單' },
{ value: 80, name: '點選' }, { value: 100, name: '展現' }
]
},
{
name: '金字塔', type: 'funnel', width: '40%', height: '45%', left: '5%', top: '5%',
sort: 'ascending',
data: [
{ value: 45, name: '訪問' }, { value: 15, name: '諮詢' }, { value: 5, name: '訂單' },
{ value: 65, name: '點選' }, { value: 100, name: '展現' }]
},
{
name: '漏斗圖', type: 'funnel', width: '40%', height: '45%', left: '55%', top: '5%',
label: { normal: { position: 'left' } },
data: [
{ value: 60, name: '訪問' }, { value: 30, name: '諮詢' },
{ value: 10, name: '訂單' }, { value: 80, name: '點選' },
{ value: 100, name: '展現' }]
},
{
name: '金字塔', type: 'funnel', width: '40%', height: '45%',
left: '55%', top: '50%', sort: 'ascending',
label: { normal: { position: 'left' } },
data: [
{ value: 45, name: '訪問' }, { value: 15, name: '諮詢' },
{ value: 5, name: '訂單' }, { value: 65, name: '點選' },
{ value: 100, name: '展現' }]
}
]
};