<template>
<view class="page">
<u-navbar :is-back="false" title="首页" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
height='36'
id="navbar">
</u-navbar>
<view class="zhuhu" v-if="false">
<view class="card1">
<view class="top">
<view class="left">
设备
</view>
<view class="right">
<image class="img1" src="@/static/off.png" mode="" style="margin-right: 30rpx;"></image>
<image class="img1" src="@/static/share.png" mode=""></image>
</view>
</view>
<view class="mid">
<view class="mid_left">
<image src="../../static/db.png" mode=""></image>
</view>
<view class="mid_right">
<view class="mid_top">
2501号
</view>
<view class="mid_bot">
<view class="txt">电表号：32562365BD253</view>
<div class="tip">在线</div>
</view>
</view>
</view>
<view class="bot">
<view class="bot_left">
<view class="echarts">
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
<l-echart ref="chart" @finished="initChart"></l-echart>
</view>
</view>
<view class="bot_right">
<view class="cont">
<view class="tit">
150KWH
</view>
<view class="txt">
总电量
</view>
</view>
<view class="cont" style="margin-left: 60rpx;">
<view class="tit">
0.5元/度
</view>
<view class="txt">
电价
</view>
</view>
</view>
</view>
</view>
<view class="card2">
<view class="tit">实时</view>
<view class="cont_box">
<view class="cont">
<view class="top">1.5KW</view>
<view class="bot">实时功率</view>
</view>
<view class="cont" style="width: 70rpx;">
<view class="top">43A</view>
<view class="bot">电流</view>
</view>
<view class="cont">
<view class="top">220V</view>
<view class="bot">电压</view>
</view>
</view>
</view>
<view class="card3">
<view class="tit">其他</view>
<view class="cont_box">
<view class="cont">
<view class="top">
<image src="@/static/sz.png" mode=""></image>
</view>
<view class="bot">其他设置</view>
</view>
<view class="cont" style="width: 58rpx;">
<view class="top">
<image src="@/static/yc.png" mode="" style="width: 58rpx;height: 60rpx;"></image>
</view>
<view class="bot">异常</view>
</view>
<view class="cont">
<view class="top">
<image src="@/static/fx.png" mode=""></image>
</view>
<view class="bot">用电分析</view>
</view>
</view>
</view>
<view class="button">电费充值</view>
<view class="zhanwei" style="width: 100%;height: 300rpx;">
</view>
</view>
<view class="fd">
</view>
<tab-bar :indexs='0'></tab-bar>
</view>
</template>
<script>
import * as echarts from 'echarts'
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
data() {
return {
bgc: {
backgroundColor: "#F7FAFE",
},
}
},
methods: {
async initChart() {
let value = 100;
let value2=552.03
const option = {
// backgroundColor:"#061740",
title: {
show: false,
text: `历史请求满意度`, // 图表标题
x: 'center',
y: '20',
textStyle: {
color: '#333', //'#fff',
fontSize: 20,
},
},
series: [
{
type: 'pie', // 饼图类型
radius: ['98%', '70%'], // 饼图半径，第一个值是内半径，第二个值是外半径
silent: true,
clockwise: true,
startAngle: 90, // 起始角度
z: 0,
zlevel: 0,
data: [
{
value: value,
name: '占比', // 数据项名称
itemStyle: {
normal: {
color: '#8883F0', // 数据项颜色
},
},
label: {
normal: {
position: 'center',
formatter: ` {a|${value2}}\n\n{b|剩余电量}`, // 标签内容格式
rich: {
a: {
fontSize: 15,
fontWeight: '700',
color: '#333',
},
b: {
fontSize: 11,
color: '#888',
},
},
},
},
},
{
value: 100 - value,
name: '',
label: {
normal: {
show: false,
},
},
itemStyle: {
normal: {
color: '#173164',
},
},
},
],
},
{
type: 'gauge', // 仪表盘类型
radius: '130%', // 仪表盘半径，占图表容器的百分比
center: ['50%', '50%'], // 仪表盘中心位置
startAngle: 359,
endAngle: 359.9,
splitNumber: 2, // 刻度分割段数
hoverAnimation: true,
axisTick: {
show: true, // 是否显示刻度线
length: 10, // 刻度线长度
lineStyle: {
color: 'auto',
width: 1,
},
},
splitLine: {
length: 0, // 刻度线分隔线长度
lineStyle: {
width: 1,
color: '#061740',
},
},
axisLabel: {
show: false, // 是否显示刻度标签
},
pointer: {
show: false, // 是否显示指针
},
axisLine: {
lineStyle: {
opacity: 0,
},
},
detail: {
show: false, // 是否显示仪表盘详情
},
data: [
{
value: 0,
name: '',
},
],
},
],
};
// console.log( this.$refs.chartRef,'1111');
const chart = await this.$refs.chart.init(echarts);
console.log(option);
chart.setOption(option)
// chart.resize({
// width: uni.upx2px(210), // Convert 210rpx to pixels
// height: uni.upx2px(190.14) // Convert 190.14rpx to pixels
// });
return chart
},
}
}
</script>
<style lang="scss">
page{
background-color: F7FAFE;
}
.page{
.zhuhu{
margin-top: 20rpx;
padding: 0 40rpx;
.card1{
padding: 34rpx 0 0 40rpx;
width: 670rpx;
height: 583rpx;
background: #FFFFFF;
box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(53,140,255,0.1);
border-radius: 28rpx 28rpx 28rpx 28rpx;
.top{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.left{
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.right{
margin-right: 56rpx;
.img1{
width: 76rpx;
height: 76rpx;
}
}
}
.mid{
margin-top: 54rpx;
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
.mid_left{
image{
width: 37rpx;
height: 98rpx;
}
}
.mid_right{
margin-left: 40rpx;
display: flex;
flex-wrap: wrap;
.mid_top{
width: 100%;
font-size: 42rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
.mid_bot{
display: flex;
flex-wrap: nowrap;
align-items: center;
.txt{
font-size: 24rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #95989D;
}
.tip{
display: flex;
align-items: center;
justify-content: center;
margin-left: 19rpx;
width: 38rpx;
height: 23rpx;
background: rgba(204,204,204,0);
opacity: 1;
border: 2rpx solid #8883F0;
border-radius: 40rpx;
font-size: 14rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
}
}
}
.bot{
margin-top: 83rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.bot_left{
width: 210rpx;
height: 190.14rpx;
.echarts{
width: 210rpx;
height: 190.14rpx;
}
}
.bot_right{
// margin-top: 50rpx;
display: flex;
flex-wrap: nowrap;
.cont{
.tit{
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 600;
color: #262B37;
line-height: 49rpx;
}
.txt{
font-size: 24rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
}
}
}
}
.card2{
padding-top: 40rpx;
margin-top: 24rpx;
width: 670rpx;
height: 254rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53,140,255,0.1);
border-radius: 28rpx;
.tit{
margin-left: 40rpx;
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.cont_box{
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
.cont{
width: 110rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
.top{
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
.bot{
margin-top: 20rpx;
font-size: 24rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
}
}
}
.card3{
padding-top: 40rpx;
margin-top: 24rpx;
width: 670rpx;
height: 318rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53,140,255,0.1);
border-radius: 28rpx;
.tit{
margin-left: 40rpx;
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.cont_box{
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
.cont{
width: 112rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
.top{
image{
width: 56rpx;
height: 56rpx;
}
}
.bot{
margin-top: 28rpx;
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #808080;
}
}
}
}
.button{
margin-left: 76rpx;
margin-top: 178rpx;
display: flex;
justify-content: center;
align-items: center;
width: 520rpx;
height: 104rpx;
background: #8883F0;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
border-radius: 52rpx 52rpx 52rpx 52rpx;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
</style>