全国教育平台网站建设,微信小游戏开发工具,青海电商网站建设公司,文化传播做网站推广吗可视化平台中#xff0c;数据分别通过仪表盘、环状图、柱形图、曲线图、 滚动表格等多种形式展示数据变化。 可视化平台大致分为左、中、右三部分#xff0c;左侧由能耗总览、耗能 占比、库存预警构成#xff0c;中间由数据总览、销售计划完成率构成#xff0c;右侧 由销售…可视化平台中数据分别通过仪表盘、环状图、柱形图、曲线图、 滚动表格等多种形式展示数据变化。 可视化平台大致分为左、中、右三部分左侧由能耗总览、耗能 占比、库存预警构成中间由数据总览、销售计划完成率构成右侧 由销售统计、销售排名TOP8、生产统计构成。平台右上角动态 显示当前系统日期、星期、时间格式。 在管理端进行添加数据后数据可视化图表进行相应变化。 1.能耗总览仪表盘统计分析耗电量、耗水量、碳排放量的总数 以不同颜色的仪表盘形式展示耗电量、耗水量、碳排放量的总数在 环状图中间区域显示各数据的数据值。 2.能耗占比环状图请分析各能耗的消耗数占能耗总数的比例 扇形图中包括两部分内容能耗占比图中需显示办公耗电量、办公用 水量、生产用水量、生产耗电量的数量及占能耗总数的比例。环状图 应用不同颜色区分显示各个能耗的占比中间区域需显示能耗总数。
下面展示左边代码部分代码一键三连私聊博主获得完整文件后端。此大屏数据与后端联动。
template div div classtop !-- 能耗总览 仪表盘-- dv-border-box-8 stylewidth: 100%; height: 18.5em; margin-top: 19px; background: none dv-decoration-7 stylewidth: 120px; height: 30px; margin-left: 40% 能耗总览/dv-decoration-7 div idtopinit stylewidth: 33.3%; height: 250px/div div idtopinit2 stylewidth: 33.3%; height: 250px/div div idtopinit3 stylewidth: 33.3%; height: 250px/div /dv-border-box-8 /div div classcenter !-- 能耗占比 环状图-- dv-border-box-8 stylewidth: 100%; height: 18.5em; margin-top: 19px dv-decoration-7 stylewidth: 120px; height: 30px; margin-left: 40% 能耗占比/dv-decoration-7 div idcenterinit stylewidth: 100%; height: 260px/div /dv-border-box-8 /div div classfooter !-- 库存预警 排序表-- dv-border-box-8 stylewidth: 100%; height: 18.5em; margin-top: 19px dv-decoration-7 stylewidth: 120px; height: 30px; margin-left: 40% 库存预警/dv-decoration-7 dv-scroll-board :configconfig stylewidth: 99%; height: 260px; margin-left: 4px / /dv-border-box-8 /div /div
/template
script
// 均是日数据化
// 能耗总览
import { productPowerReportByDay } from /api/dv/carbon.js;
// 能耗占比
import { getEmissionPercent } from /api/dv/carbon.js;
// 库存预警
import { listInventory } from /api/dv/carbon.js;
export default { name: LeftContain, components: {}, data() { return { paramsFrom: { pageNum: 1, pageSize: 20, }, // 库存预警 config: {}, // 能耗总览 // 耗电量 totalPowerConsume: 0, // 耗水量 totalWaterConsume: 0, // 碳排放量 totalCarbonEmission: 0, // 耗能占比 totals: 0, // 办公用水量 办公耗电量 totalOfficeWaterConsumes: 0, totalOfficePowerConsumes: 0, // 生产用水量 生产耗电量 totalWaterConsumes: 0, totalPowerConsumes: 0, }; }, created() { this.getDataTop(); }, methods: { // 获取数据 getDataTop() { productPowerReportByDay().then((res) { this.$nextTick(() { this.inittop(); this.inittop2(); this.inittop3(); }); this.totalCarbonEmission res.rows[0].totalCarbonEmission; this.totalPowerConsume res.rows[0].totalOfficePowerConsume res.rows[0].totalPowerConsume; this.totalWaterConsume res.rows[0].totalWaterConsume res.rows[0].totalOfficeWaterConsume; }); getEmissionPercent().then((res) { this.$nextTick(() { this.initcenter(); }); this.totalOfficePowerConsumes res.data[0].totalOfficePowerConsume; this.totalOfficeWaterConsumes res.data[0].totalOfficeWaterConsume; this.totalPowerConsumes res.data[0].totalPowerConsume; this.totalWaterConsumes res.data[0].totalWaterConsume; this.totals res.data[0].totalOfficePowerConsume res.data[0].totalOfficeWaterConsume res.data[0].totalPowerConsume res.data[0].totalOfficePowerConsume; }); listInventory(this.paramsFrom).then((res) { this.config { header: [编号, 物料, 仓库, 库存, 状态], data: [], index: false, headerBGC: #43f5ff, oddRowBGC: rgba(190,20,128,0.5), evenRowBGC: #43ad7f7f, columnWidth: [50], align: [center], }; this.config.data res.rows.map((item) { return [ item.id, item.materialName, item.warehouseName, item.totalInventory, this.getStatus(item), ]; }); }); }, getStatus(item) { if ( item.inventoryLimit item.totalInventory item.totalInventory item.inventoryLower ) { return 正常; } else if (item.totalInventory item.inventoryLower) { return 不足; } else { return 溢出; } }, // 能耗总览-定义仪表盘 inittop() { let totalPowerConsume this.totalPowerConsume; let totalCarbonEmission this.totalCarbonEmission; let totalWaterConsume this.totalWaterConsume; var chartDom document.getElementById(topinit); var myChart this.$echarts.init(chartDom); var option; option { tooltip: { formatter: {a} br/{b} : {c}%, }, series: [ { // 最大数 max: totalPowerConsume 1000, name: Pressure, type: gauge, // 进度 progress: { show: true, }, // 数据数字 detail: { color: orange, fontSize: 22, valueAnimation: true, formatter: {value}, }, // 标题 title: { show: true, offsetCenter: [0, 80%], color: white, }, // 刻度数字 axisLabel: { show: false, }, // 指针大小 pointer: { width: 4, }, // 数据 data: [ { value: totalPowerConsume, name: 耗电量, }, ], // 指针颜色 itemStyle: { color: orange, }, }, ], }; option myChart.setOption(option); }, inittop2() { let totalPowerConsume this.totalPowerConsume; let totalCarbonEmission this.totalCarbonEmission; let totalWaterConsume this.totalWaterConsume; var chartDom document.getElementById(topinit2); var myChart this.$echarts.init(chartDom); var option; option { tooltip: { formatter: {a} br/{b} : {c}%, }, series: [ { max: totalWaterConsume 5000, name: Pressure, type: gauge, title: { show: true, offsetCenter: [0, 80%], color: white, }, axisLabel: { show: false, }, progress: { show: true, }, pointer: { width: 4, }, detail: { color: green, fontSize: 22, valueAnimation: true, formatter: {value}, }, data: [ { value: totalWaterConsume, name: 耗水量, }, ], itemStyle: { color: green, }, }, ], }; option myChart.setOption(option); }, inittop3() { let totalPowerConsume this.totalPowerConsume; let totalCarbonEmission this.totalCarbonEmission; let totalWaterConsume this.totalWaterConsume; var chartDom document.getElementById(topinit3); var myChart this.$echarts.init(chartDom); var option; option { tooltip: { formatter: {a} br/{b} : {c}%, }, series: [ { max: totalCarbonEmission 10000, name: Pressure, type: gauge, progress: { show: true, }, pointer: { width: 4, }, axisLabel: { show: false, }, axisLine: { show: true, lineStyle: {}, }, detail: { color: blue, fontSize: 22, valueAnimation: true, formatter: {value}, }, title: { show: true, offsetCenter: [0, 80%], color: white, }, data: [ { value: totalCarbonEmission, name: 碳排放量, }, ], itemStyle: { color: blue, }, }, ], }; option myChart.setOption(option); }, // 能耗占比-环状图 initcenter() { let totalOfficePowerConsumes this.totalOfficePowerConsumes; let totalOfficeWaterConsumes this.totalOfficeWaterConsumes; let totalPowerConsumes this.totalPowerConsumes; let totalWaterConsumes this.totalWaterConsumes; let totalS this.totals; var chartDom document.getElementById(centerinit); var myChart this.$echarts.init(chartDom); var option; option { tooltip: { trigger: item, }, // 是否显示隐藏图例的一些操作 legend: { show: false, top: 5%, left: center, }, series: [ // 外圈 暂时不加引导线 { name: 能耗占比, type: pie, radius: [40%, 70%], avoidLabelOverlap: false, label: { show: true, position: outside, // formatter: {b} : {c*100}%, formatter(params) { return params.name (params.value / totalS) * 100 %; }, }, labelLine: { show: true, length: 6, length2: 7, lineStyle: { color: red, width: 21, }, }, emphasis: { label: { show: true, fontSize: 40, fontWeight: bold, }, }, labelLine: { show: false, }, data: [ { value: totalOfficePowerConsumes, name: 办公耗电量 }, { value: totalOfficeWaterConsumes, name: 办公用水量 }, { value: totalPowerConsumes, name: 生产耗电量 }, { value: totalWaterConsumes, name: 生产耗水量 }, ], }, // 内圈把半径设为0 { name: 能耗总数, type: pie, radius: [0%, 0%], avoidLabelOverlap: false, // 显示数据 label: { show: true, color: #fff, position: inside, formatter: {c}\n{b}, }, // 鼠标放上去变大 emphasis: { label: { show: true, fontSize: 40, fontWeight: bold, color: #fff, }, }, labelLine: { show: false, }, data: [ { value: totalS, name: 总数, }, ], }, ], }; option myChart.setOption(option); }, },
};
/script
style langscss scoped
* { background: none;
}
.top { background: none;
}
#topinit,
#topinit3,
#topinit2 { display: flex; float: left;
}
/style
