小程序数据可视化echarts 动态设置数据
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,
苦心人，天不负
