Echarts饼状图与箱线图联动
吾之初為，記之以便後日視資。
效果展示
示例代码
<template>
<div class="app-container">
<el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
<el-form-item label="功能位置">
<el-cascader
v-model="pointCodeList"
:options="deviceTree"
@change="handleChange"
clearable
></el-cascader>
</el-form-item>
<el-form-item label="设备分类">
<el-cascader
v-model="classCodeList"
:options="deviceTypeTree"
clearable
></el-cascader>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-select
v-model="queryParams.eCode"
clearable
filterable
placeholder="请选择"
>
<el-option
v-for="device in deviceList"
:key="device.id"
:label="device.label"
:value="device.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" @click="handleQuery"
>查询</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="20" class="mb20">
<el-col :span="10">
<el-card style="height: 300px" id="usePie">
<!-- <h1>饼状图 利用率（0-40），（40-60），（60-80）,(80-100)</h1>-->
</el-card>
</el-col>
<el-col :span="14">
<el-card style="height: 300px" id="useBox">
<!-- <h1>箱线图： 横坐标：设备类别 纵坐标：利用率</h1>-->
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-table
:data="utilizationPageList"
v-loading="loading"
border
show-overflow-tooltip
>
<el-table-column
:index="(queryParams.pageNum - 1) * queryParams.pageSize + 1"
label="序号"
type="index"
width="60"
/>
<el-table-column label="设备名称" prop="E_NAME" />
<el-table-column label="设备编号" prop="E_CODE" />
<el-table-column label="功能位置" prop="POSITION_NAME" />
<el-table-column label="首次上线时间" prop="FIRST_ONLINE" />
<el-table-column label="累计在线时长" prop="ONLINE_NUM" />
<el-table-column label="设备利用率" prop="RATE" />
<el-table-column
align="center"
class-name="small-padding fixed-width"
label="操作"
width="80"
>
<template v-slot="scope">
<el-button
icon="el-icon-edit"
size="mini"
type="text"
@click="handleDetail(scope.row)"
>查看详情</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:limit.sync="queryParams.pageSize"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getUtilizationPageList"
/>
</el-col>
</el-row>
</div>
</template>
<script>
import sintDeviceViewApi from "@/api/bdia/device/sint/monitor/sint_device_view";
import * as echarts from "echarts";
import useApi from "@/api/bdia/device/sint/use/index";
import { copy } from "@/utils/elvis";
// import useDetaillVue from "./use_detail";
export default {
created() {
this.getDeviceTree();
this.getDeviceTypeTree();
// 获取利用率分析列表
this.getUtilizationPageList();
// 查询设备利用率
this.selectEquipmentUtilization();
// 根据利用率查询设备集合
// this.getEquipmentListByUtilization();
},
watch: {},
mounted() {
this.makeUseBox();
},
data() {
return {
loading: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 50,
// 设备编码
eCode: "",
// 功能位置
positionCode: "",
// 设备分类
classCode: "",
// 区间范围
intervalRange: [],
},
pointCodeList: [],
classCodeList: [],
total: 0,
deviceTree: [],
deviceTypeTree: [],
deviceList: [],
// 列表展示数据
utilizationPageList: [],
useDetail: undefined,
openUseDetail: false,
// 左侧设备利用率echarts数据
equipmentUtilizationList: [],
// 右侧设备echarts数据
equipmentList: [],
source: [],
};
},
methods: {
// 根据利用率查询设备集合
getEquipmentListByUtilization() {
let param = copy(this.queryParams);
param.positionCode = this.pointCodeList[2];
param.classCode = this.classCodeList[2];
useApi.getEquipmentListByUtilization(param).then((response) => {
this.equipmentList = response.data.equipmentUtilizationCountVos;
});
},
// 查询设备利用率
selectEquipmentUtilization() {
let param = copy(this.queryParams);
param.positionCode = this.pointCodeList[2];
param.classCode = this.classCodeList[2];
useApi.selectEquipmentUtilization(param).then((response) => {
this.equipmentUtilizationList = response.data;
// 调用饼图初始化方法
this.makeUsePie();
});
},
// 获取利用率分析数据列表
getUtilizationPageList() {
let param = copy(this.queryParams);
param.positionCode = this.pointCodeList[2];
param.classCode = this.classCodeList[2];
useApi.getUtilizationPageList(param).then((response) => {
this.utilizationPageList = response.rows;
this.utilizationPageList.forEach((item) => {
//毫秒值转时间
item.FIRST_ONLINE = this.getDatebyTimeStamp(item.FIRST_ONLINE);
//毫秒值转小时
item.ONLINE_NUM = (item.ONLINE_NUM / (60 * 60)).toFixed(2);
// 利用率保留两位小数
item.RATE = item.RATE.toFixed(2) + "%";
});
this.total = response.total;
this.loading = false;
});
},
// 获取设备功能位置
getDeviceTree() {
let parma = {
code: "2109",
};
sintDeviceViewApi.getDevicePosTreeByCode(parma).then((response) => {
this.deviceTree = response.data;
// 递归处理数据
this.formatTree(this.deviceTree);
});
},
formatTree(list) {
list.forEach((item) => {
item.name = item.label;
item.value = item.id;
item.code = item.id;
if (item.hasOwnProperty("children")) {
this.formatTree(item.children);
}
});
},
// 获取设备分类
getDeviceTypeTree() {
let parma = {
// code: '2109',
};
sintDeviceViewApi.getDeviceTypeTree(parma).then((response) => {
this.deviceTypeTree = response.data;
// 递归处理数据
this.formatTree(this.deviceTypeTree);
});
},
handleChange(value) {
this.queryParams.eCode = "";
this.getDeviceByPointCode();
},
getDeviceByPointCode() {
let param = {
code: this.pointCodeList[2],
};
if (param.code != undefined) {
sintDeviceViewApi.getDeviceByPosCode(param).then((response) => {
this.deviceList = response.data;
});
}
},
// 查询按钮
handleQuery() {
// 获取利用率分析列表
this.getUtilizationPageList();
// 查询设备利用率
this.selectEquipmentUtilization();
this.makeUseBox();
},
// 饼状图
makeUsePie() {
// 饼状图数据
let data = [];
this.equipmentUtilizationList.forEach((element, index) => {
data.push({
value: element.utilizationCount,
name: element.intervalRange[0] + "~" + element.intervalRange[1],
});
});
let option = {
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: data,
},
],
};
let usePie = echarts.init(document.getElementById("usePie"));
usePie.setOption(option);
usePie.off("click");
// 事件处理 联动箱线图、列表数据查询
usePie.on("click", (params) => {
this.queryParams.intervalRange = [
parseInt(params.data.name.split("~")[0]),
parseInt(params.data.name.split("~")[1]),
];
// 列表查询方法
this.getUtilizationPageList();
this.makeUseBox();
});
},
// 箱线图
makeUseBox() {
let enameList = [];
let param = copy(this.queryParams);
useApi.getEquipmentListByUtilization(param).then((response) => {
if (JSON.stringify(response.data) === "{}") {
let ecObj = echarts.init(document.getElementById("useBox"));
ecObj.clear();
return;
}
this.source = response.data.source;
response.data.equipmentUtilizationCountVos.forEach((item) => {
enameList.push(item.ename);
});
let option = {
dataset: [
{
source: this.source,
},
{
transform: {
type: "boxplot",
config: {
itemNameFormatter: (params) => {
return enameList[params.value];
},
},
},
},
{
fromDatasetIndex: 1,
fromTransformResult: 1,
},
],
tooltip: {
trigger: "item",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "10%",
right: "10%",
bottom: "15%",
},
xAxis: {
type: "category",
boundaryGap: true,
nameGap: 30,
splitArea: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
type: "value",
splitArea: {
show: true,
},
},
series: [
{
//系列名称，用于tooltip的显示，legend的图例筛选
name: "boxplot",
type: "boxplot",
datasetIndex: 1,
},
],
};
echarts.dispose(document.getElementById("useBox"));
let ecObj = echarts.init(document.getElementById("useBox"));
ecObj.setOption(option);
});
},
handleDetail(row) {
this.$router.push({
path: "/device/sint/use/useDetail",
query: { data: row },
});
},
// 毫秒值转时间
getDatebyTimeStamp(str) {
let oDate = new Date(str * 1000);
let oYear = oDate.getFullYear(),
oMonth = oDate.getMonth() + 1,
oDay = oDate.getDate(),
oHour = oDate.getHours(),
oMin = oDate.getMinutes(),
oSen = oDate.getSeconds(),
oTime =
oYear +
"-" +
this.addZero(oMonth) +
"-" +
this.addZero(oDay) +
" " +
this.addZero(oHour) +
":" +
this.addZero(oMin) +
":" +
this.addZero(oSen);
return oTime;
},
//补零操作
addZero(num) {
if (parseInt(num) < 10) {
num = "0" + num;
}
return num;
},
},
};
</script>