import * as echarts from '../components/ec-canvas/echarts';
import { status, measured, distribut } from '../services/home'
let charts = null;
let chart = null;
let charthos = null;
var bainua = () => {
Promise.all([status({ as: 111 }), measured(), distribut()]).then((res) => {
console.log(res)
}, reason => {
console.log(reason)
})
// 客房狀態圖
status({ as: 111 }).then((res) => {
console.log(res)
charts.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} {b}: {c} ({d}%)"
},
legend: {
// orient: 'vertical',
// left: 10,
left: 'center',
top: 'bottom',
data: ['空凈', '空臟', '住凈', '住臟', '維修', '鎖']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 20,
containLabel: true
},
//設置餅狀圖每個顏色塊的顏色
color: ['#3AA1FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'],
series: [{
name: '客房狀態圖',
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
hoverOffset: 3,
selectedOffset: 1,
label: {
normal: {
show: true,
position: 'outside',
formatter: '{b}:{c}',
fontSize: 10
},
emphasis: {
show: true,
textStyle: {
fontSize: 12,
fontWeight: 'bold'
}
}
},
data: [
{ value: 1, name: "空凈" },
{ value: 2, name: "空臟" },
{ value: 3, name: "住凈" },
{ value: 1, name: "住臟" },
{
value: 2,
name: "維修"
}, {
value: 3,
name: "鎖"
}
]
}]
});
})
// 實時客情
measured().then(() => {
chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
// orient: 'vertical',
// left: 10,
left: 'center',
top: 'bottom',
data: ['自來散客', '團隊', '公司協議', '網絡訂房', '自用房', '免費房', '智會員', '潮會員', '名會員']
},
//設置餅狀圖每個顏色塊的顏色
color: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273', '#1890FF'],
series: [{
name: '實時客情',
type: 'pie',
radius: ['30%', '50%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
hoverOffset: 3,
selectedOffset: 1,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: true
},
data: [
{ value: 10, name: '自來散客' },
{ value: 20, name: '團隊' },
{ value: 15, name: '公司協議' },
{ value: 16, name: '網絡訂房' },
{ value: 18, name: '自用房' },
{ value: 20, name: '免費房' },
{ value: 12, name: '智會員' },
{ value: 11, name: '潮會員' },
{ value: 14, name: '名會員' },
]
}]
});
})
// 在住分布圖
distribut().then(() => {
charthos.setOption({
// title: {
// text: '世界人口總量',
// subtext: '數據來自網絡'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['總數', '在住'],
left: 'right',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['智享大床房', '智享大床房', '智享大床房', '智享大床房', '智享大床房', '智享大床房']
},
series: [{
name: '總數',
type: 'bar',
radius: '30%',
center: ['50%', '50%'],
data: [1, 4, 8, 12, 16, 20],
color: "#3AA1FF"
},
{
name: '在住',
type: 'bar',
radius: '30%',
center: ['50%', '50%'],
data: [1, 4, 8, 12, 16, 13],
color: "#4ECB73"
}
]
});
})
}
// 客房狀態圖
var initCharts = function(canvas, width, height, dpr) {
charts = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(charts);
// bainua()
return charts;
}
// 實時客情
var initChartsco = function(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
return chart;
}
// 在住分布圖
var initHouse = function(canvas, width, height, dpr) {
charthos = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(charthos);
return charthos;
}
module.exports = {
initCharts: initCharts,
initChartsco: initChartsco,
initHouse,
bainua,
