gongjiale
/
gangkou
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 调整报警管理-厂界在线页面 

调整报警管理-厂界在线页面，解决选择部门后页面无数据的问题，修改页面后端接口。
This commit is contained in:
LokerL 2024-10-11 21:16:39 +08:00
parent 627e8fd07e
commit 72b2ace017
7 changed files with 440 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/controller/OilAnalysisController.java Normal file
View File

@ -0,0 +1,31 @@
package com.ruoyi.project.oil.controller;
import com.ruoyi.framework.web.controller.BaseController;
import com.ruoyi.framework.web.domain.AjaxResult;
import com.ruoyi.project.oil.service.IOilThDeviceReportService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/analysis")
public class OilAnalysisController extends BaseController {
@Autowired
private IOilThDeviceReportService oilThDeviceReportService;
@GetMapping("/factoryBoundaryOnline")
public AjaxResult getDeviceReport(Long deptId, String beginDate, String endDate) {
List<Map<String, Object>> alarmCount = oilThDeviceReportService.selectAlarmCountByDeptIdAndDateRange(deptId, beginDate, endDate);
List<Map<String, Object>> alarmCountDesc = oilThDeviceReportService.selectAlarmCountByDeptIdAndDateRangeDesc(deptId, beginDate, endDate);
Map<String, Object> resultMap = new HashMap<>();
resultMap.put("alarmCount", alarmCount);
resultMap.put("alarmCountDesc", alarmCountDesc);
return AjaxResult.success(resultMap);
}
}

7
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/mapper/ThDeviceReportMapper.java
View File

@ -71,4 +71,11 @@ public interface ThDeviceReportMapper {
*/ */
@MapKey("day") @MapKey("day")
List<Map<String, Object>> dailyReportDataOverview(@Param("day") String day); List<Map<String, Object>> dailyReportDataOverview(@Param("day") String day);
@MapKey("day")
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(@Param("deptId") Long deptId, @Param("beginDate") String beginDate, @Param("endDate") String endDate);
@MapKey("sn")
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(@Param("deptId") Long deptId, @Param("beginDate") String beginDate, @Param("endDate") String endDate);
} }

4
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/IOilThDeviceReportService.java
View File

@ -9,4 +9,8 @@ public interface IOilThDeviceReportService {
List<Map<String, Object>> monthReportDataOverviewDeviceDs(Long deptId, String month); List<Map<String, Object>> monthReportDataOverviewDeviceDs(Long deptId, String month);
List<Map<String, Object>> dailyReportDataOverview(String day); List<Map<String, Object>> dailyReportDataOverview(String day);
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(Long deptId, String beginDate, String endDate);
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(Long deptId, String beginDate, String endDate);
} }

10
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/impl/OilThDeviceReportService.java
View File

@ -31,4 +31,14 @@ public class OilThDeviceReportService implements IOilThDeviceReportService {
return camelCaseMapListKey(thDeviceReportMapper.dailyReportDataOverview(day)); return camelCaseMapListKey(thDeviceReportMapper.dailyReportDataOverview(day));
} }
@Override
public List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(Long deptId, String beginDate, String endDate) {
return camelCaseMapListKey(thDeviceReportMapper.selectAlarmCountByDeptIdAndDateRange(deptId, beginDate, endDate));
}
@Override
public List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(Long deptId, String beginDate, String endDate) {
return camelCaseMapListKey(thDeviceReportMapper.selectAlarmCountByDeptIdAndDateRangeDesc(deptId, beginDate, endDate));
}
} }

48
RuoYi-Vue-Oracle/src/main/resources/mybatis/oil/ThDeviceReportMapper.xml
View File

@ -177,4 +177,52 @@
GROUP BY TO_CHAR(d.report_time, 'YYYY-MM-DD'), ppp.dept_name, pp.dept_name, p.dept_name, d.sn GROUP BY TO_CHAR(d.report_time, 'YYYY-MM-DD'), ppp.dept_name, pp.dept_name, p.dept_name, d.sn
ORDER BY ppp.dept_name, pp.dept_name, p.dept_name ORDER BY ppp.dept_name, pp.dept_name, p.dept_name
</select> </select>
<!-- 选择日期范围内 某个部门id下的所有子部门的所有设备的报警每日数量；统计(d.zt = '一级报警' OR d.zt = '二级报警')的alarm_count， 统计当天全部的数量count -->
<select id="selectAlarmCountByDeptIdAndDateRange" parameterType="map" resultType="map">
SELECT TO_CHAR(d.report_time, 'YYYY-MM-DD') AS day,
COUNT(CASE WHEN d.zt = '一级报警' OR d.zt = '二级报警' THEN 1 END) AS alarm_count,
COUNT(1) AS count
FROM th_device_report d
LEFT JOIN th_device td ON d.sn = td.sn
LEFT JOIN sys_dept p ON td.dept_id = p.dept_id
WHERE d.sn IN (SELECT d.sn
FROM th_device d
LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
WHERE d.dept_id IN (SELECT dept_id
FROM sys_dept START WITH dept_id = #{deptId}
CONNECT BY PRIOR dept_id = parent_id))
AND d.report_time &gt;= TO_DATE(#{beginDate}, 'YYYY-MM-DD')
AND d.report_time &lt;= TO_DATE(#{endDate}, 'YYYY-MM-DD')
GROUP BY TO_CHAR(d.report_time, 'YYYY-MM-DD')
ORDER BY day
</select>
<!-- 选择日期范围内 某个部门id下的所有子部门的所有设备的报警数量 降序排列 -->
<select id="selectAlarmCountByDeptIdAndDateRangeDesc" parameterType="map" resultType="map">
SELECT d.sn,
COUNT(d.id) AS count,
p.dept_name as "p",
pp.dept_name as "pp",
ppp.dept_name as "ppp",
td.address,
td.name,
d.zt
FROM th_device_report d
LEFT JOIN th_device td ON d.sn = td.sn
LEFT JOIN sys_dept p ON td.dept_id = p.dept_id
LEFT JOIN sys_dept pp ON p.parent_id = pp.dept_id
LEFT JOIN sys_dept ppp ON pp.parent_id = ppp.dept_id
WHERE d.sn IN (SELECT d.sn
FROM th_device d
LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
WHERE d.dept_id IN (SELECT dept_id
FROM sys_dept START WITH dept_id = #{deptId}
CONNECT BY PRIOR dept_id = parent_id))
AND d.report_time &gt;= TO_DATE(#{beginDate}, 'YYYY-MM-DD')
AND d.report_time &lt;= TO_DATE(#{endDate}, 'YYYY-MM-DD')
AND (d.zt = '一级报警' OR d.zt = '二级报警')
GROUP BY d.sn, p.dept_name, pp.dept_name, ppp.dept_name, td.address, td.name, d.zt
ORDER BY count DESC
</select>
</mapper> </mapper>

9
ruoyi-ui/src/api/analysis/index.js Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
export function factoryBoundaryOnline(params) {
return request({
url: '/analysis/factoryBoundaryOnline',
params: params,
method: 'get',
})
}

598
ruoyi-ui/src/views/dataAnalysis/bound/index.vue
View File

@ -1,302 +1,344 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :inline="true" :model="queryParams" ref="form"> <el-row :gutter="10">
<el-col :span="6">
<dept-tree @deptChange="handleDeptChange" :showQuickGroup="true" />
</el-col>
<el-col :span="6">
<el-date-picker
v-model="dateList"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
@change="dateChange"
>
</el-date-picker>
</el-col>
</el-row>
<el-form-item> <div style="display: flex; height: 700px; margin-top: 10px;">
<span style="margin-right: 10px;">日期</span> <div style="width: 50%; background: #e0e1e2; padding: 10px">
<el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="queryChart">搜索</el-button>
</el-form-item>
</el-form>
<div style="display: flex;height: 780px;">
<div style="width: 50%;background: #e0e1e2;padding:10px">
<div class="title">厂界在线监测设备报警情况分析</div> <div class="title">厂界在线监测设备报警情况分析</div>
<div style="width:100%;height:700px;" ref="qdCityMap1"></div> <div style="width: 100%; height: 650px" ref="qdCityMap1"></div>
</div>
</div> <div style="width: 50%; background: #e0e1e2; padding: 10px">
<div style="width: 50%;background: #e0e1e2;padding:10px"> 结合{{days}}天的数据分析，报警最多的监测设备列表如下，请在未来加强管控！
结合最近14天的数据分析，报警最多的监测设备列表如下，请在未来加强管控！ <el-table v-loading="loading" :data="alarmCountDesc" max-height="650">
<el-table v-loading="loading" :data="monitorList" style="height: 800px;"> <el-table-column label="企业名称" align="center" prop="p" />
<el-table-column label="企业名称" align="center" prop="a" /> <el-table-column label="设备编号" align="center" prop="sn" />
<el-table-column label="设备编号" align="center" prop="d" /> <el-table-column label="放置区域" align="center" prop="address" />
<el-table-column label="放置区域" align="center" prop="b" /> <el-table-column label="报警次数" align="center" prop="count">
<el-table-column label="报警次数" align="center" prop="e" > <template slot-scope="scope">
<template slot-scope="scope"> <span :style="{ color: 'red' }">{{ scope.row.count }}</span>
<span :style="{ color: 'red' }">{{ scope.row.e }}</span> </template>
</template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column
<template slot-scope="scope"> label="操作"
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">下发通知</el-button> align="center"
</template> class-name="small-padding fixed-width"
</el-table-column> >
</el-table> <template slot-scope="scope">
<el-button
</div> size="mini"
</div> type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
<!--发送通知--> >下发通知</el-button
<send-msg :deviceInfo="deviceInfo" v-if="isOpenMsg" :isOpenMsg="isOpenMsg" @closeMsg="closeMsg"></send-msg> >
</template>
</el-table-column>
</el-table>
</div>
</div> </div>
</template>
<script> <!--发送通知-->
import { queryAlarmChart} from "@/api/demostrate/monitor"; <send-msg
import { queryMonitorPrediction} from "@/api/demostrate/monitor"; :deviceInfo="deviceInfo"
import sendMsg from "@/views/demostrate/alarm/sendMsg.vue"; v-if="isOpenMsg"
const echarts = require("echarts"); :isOpenMsg="isOpenMsg"
export default { @closeMsg="closeMsg"
name: "alarm", ></send-msg>
components: {sendMsg}, </div>
dicts: [], </template>
data() {
return {
monitorList:[{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:2},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:4},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3}
,{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:6},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
], <script>
loading:false, import { queryAlarmChart } from "@/api/demostrate/monitor";
pickerOptions: { import { queryMonitorPrediction } from "@/api/demostrate/monitor";
// disabledDate(time) { import sendMsg from "@/views/demostrate/alarm/sendMsg.vue";
// // 计算选择的时间跨度 const echarts = require("echarts");
// const diff = Math.abs(time.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24); import { factoryBoundaryOnline } from "@/api/analysis"
import to from '@/utils/await-to.js';
import moment from 'moment';
import { debounce } from '@/utils';
export default {
name: "alarm",
components: { sendMsg },
dicts: [],
data() {
return {
dept: null,
queryDebounce: null,
alarmCount: [],
alarmCountDesc: [],
days: 0,
// // 如果时间跨度超过30天，则禁用该日期 loading: false,
// return diff > 30; pickerOptions: {
// }, // disabledDate(time) {
shortcuts: [ // // 计算选择的时间跨度
{ // const diff = Math.abs(time.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24);
text: '最近30天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 29); // 30天前
picker.$emit('pick', [start, end]); // // 如果时间跨度超过30天，则禁用该日期
} // return diff > 30;
}]}, // },
dateList: [],//日期 shortcuts: [
total:0, {
isOpenMsg:false, text: "最近30天",
deviceInfo: {}, onClick(picker) {
// 查询参数 const end = new Date();
queryParams: { const start = new Date();
startTime: null, start.setDate(start.getDate() - 29); // 30天前
endTime: null,
},
picker.$emit("pick", [start, end]);
}; },
},
],
},
dateList: [], //日期
total: 0,
isOpenMsg: false,
deviceInfo: {},
// 查询参数
queryParams: {
deptId: null,
beginDate: null,
endDate: null,
},
};
},
mounted() {
this.queryDebounce = debounce(this.query, 100);
setTimeout(() => {
let dsiab_com = this.$refs.qdCityMap1;
dsiab_com.removeAttribute("_echarts_instance_");
this.getDefaultDateRange();
});
},
watch: {
dateList: {
handler: function () {
// 计算选择的时间天数
const diff = Math.abs(
new Date(this.dateList[1]).getTime() -
new Date(this.dateList[0]).getTime()
);
this.days = diff / (1000 * 60 * 60 * 24);
},
deep: true,
}, },
created() { },
methods: {
dateChange() {
this.queryDebounce();
}, },
mounted() { handleDeptChange(dept) {
this.dept = dept;
setTimeout(() => { this.queryDebounce();
let dsiab_com = this.$refs.qdCityMap1
dsiab_com.removeAttribute('_echarts_instance_')
this.getDefaultDateRange()
// this.getList();
})
}, },
methods: { async query() {
//发送通知 if (this.dept && this.dateList.length > 0) {
handleUpdate(row) { this.queryParams.deptId = this.dept.deptId;
this.deviceInfo = row this.queryParams.beginDate = this.dateList[0];
this.isOpenMsg = true this.queryParams.endDate = this.dateList[1];
}, console.log(this.queryParams);
const [err, res] = await to(factoryBoundaryOnline(this.queryParams));
queryChart() { if (err) {
if (this.dateList && this.dateList.length > 0) { console.error(err);
this.queryParams.startTime = this.dateList[0] this.$message.error("查询失败");
this.queryParams.endTime = this.dateList[1] return;
} else {
this.queryParams.startTime = null
this.queryParams.endTime = null
} }
// queryAlarmChart(this.queryParams).then(response => { if (res.code !== 200) {
// if(response.data && response.data.length>0){ this.$message.error(res.msg);
// let xData=[]//日期 return;
// let yData1=[]// 一级报警 }
// let yData2=[]// 二级报警 console.log(res);
// let yData3=[]//报警率 this.alarmCount = res.data.alarmCount;
// response.data.forEach(map=>{ this.alarmCountDesc = res.data.alarmCountDesc;
// xData.push(map.reportTime) this.queryChart();
// yData1.push(map.level1)
// yData2.push(map.level2)
// yData3.push(map.progress)
// })
// this.init(xData,yData1,yData2,yData3)
// }
// });
let xData = ['2024-05-03','2024-05-06','2024-05-08','2024-05-11','2024-05-15','2024-05-20']//日期
let yData1 = [10,12,32,12,5,6,9]// 一级报警
let yData2 = [5,1,3,5,9,2,1]// 二级报警
let yData3 = [15,23,3,12,20,3,2]//报警率
this.init(xData, yData1, yData2, yData3) }
}, },
getDefaultDateRange() { //发送通知
const endDate = new Date(); // 当前时间 handleUpdate(row) {
const startDate = new Date(); this.deviceInfo = row;
startDate.setDate(startDate.getDate() - 7); // 当前时间之前的7天 this.isOpenMsg = true;
this.dateList = [startDate, endDate] },
this.queryChart()
}, queryChart() {
init(xData,yData1,yData2,yData3) { const xData = [];
const yData2GradientColor = [ const yData1 = [];
const yData2 = [];
const yData3 = [];
this.alarmCount.forEach((item) => {
xData.push(item.day);
yData1.push(item.alarmCount);
yData3.push(((item.alarmCount / item.count) * 100).toFixed(2));
});
this.init(xData, yData1, yData2, yData3);
},
getDefaultDateRange() {
const endDate = new Date(); // 当前时间
const startDate = new Date();
startDate.setDate(startDate.getDate() - 7); // 当前时间之前的7天
// 格式化为YYYY-MM-DD
this.dateList = [
moment(startDate).format("YYYY-MM-DD"),
moment(endDate).format("YYYY-MM-DD"),
];
this.queryChart();
},
init(xData, yData1, yData2, yData3) {
const yData2GradientColor = [
{
offset: 0,
color: "#0058e1",
},
{
offset: 1,
color: "#3BA1E3",
},
];
const yData3GradientColor = [
{
offset: 0,
color: "#32E8D4",
},
{
offset: 1,
color: "#4BA1E3",
},
];
const option = {
tooltip: {
trigger: "axis", // x轴触发
formatter: function (params) {
let list = [];
let listItem = "";
params.forEach((item) => {
// 柱状图加单位 局，折线图加单位 %
let unitValue =
item.seriesType == "bar" ? item.value + "个" : item.value + "%";
list.push(item.marker + "" + item.seriesName + ": " + unitValue);
});
listItem = list.join("<br/>");
return "<div>" + listItem + "</div>";
},
},
legend: {
orient: "horizontal", // 水平排列
x: "center", //可设定图例在左、右、居中
y: "top", //可设定图例在上、下、居中
padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离]
},
xAxis: {
type: "category",
data: xData,
},
yAxis: [
{ {
offset: 0, type: "value",
color: '#0058e1' name: "报警数",
}, yAxisIndex: 0,
{ axisLabel: {
offset: 1, //y轴每个刻度都加单位
color: '#3BA1E3' formatter: "{value}个",
}
]
const yData3GradientColor = [
{
offset: 0,
color: '#32E8D4'
},
{
offset: 1,
color: '#4BA1E3'
}
]
const option = {
tooltip: {
trigger: 'axis', // x轴触发
formatter: function (params) {
let list = []
let listItem = ''
params.forEach((item) => {
// 柱状图加单位 局，折线图加单位 %
let unitValue = item.seriesType == 'bar' ? item.value + '个' : item.value + '%'
list.push(item.marker + '' + item.seriesName + ': ' + unitValue)
})
listItem = list.join('<br/>')
return '<div>' + listItem + '</div>'
}
},
legend: {
orient: 'horizontal', // 水平排列
x: 'center', //可设定图例在左、右、居中
y: 'top', //可设定图例在上、下、居中
padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离]
},
xAxis: {
type: 'category',
data: xData
},
yAxis: [
{
type: 'value',
name: '报警数',
yAxisIndex: 0,
axisLabel: {
//y轴每个刻度都加单位
formatter: "{value}个",
},
}, },
{ },
type: 'value', {
name: "报警率(%)", type: "value",
min: 0, // 最小为0 name: "报警率(%)",
max: 100, // 最大为100 min: 0, // 最小为0
interval: 25, // 间隔25 max: 100, // 最大为100
axisLabel: { interval: 25, // 间隔25
//y轴每个刻度都加单位 axisLabel: {
formatter: "{value}%", //y轴每个刻度都加单位
}, formatter: "{value}%",
}, },
], },
series: [ ],
{ series: [
type: 'bar', {
stack: 'x', type: "bar",
name: "报警数", stack: "x",
data: yData1, name: "报警数",
label: { data: yData1,
show: true, label: {
color: '#eee' show: true,
}, color: "#eee",
barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
// stack:'重叠',
itemStyle: {
// borderRadius: [20, 20, 6, 6],
color: '#15C1AF',
}
}, },
// { barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
// type: 'bar', // stack:'重叠',
// stack: 'x', itemStyle: {
// name: "二级报警数", // borderRadius: [20, 20, 6, 6],
// data: yData2, color: "#15C1AF",
// label: { },
// show: true, },
// color: '#eee' // {
// }, // type: 'bar',
// barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠 // stack: 'x',
// // stack:'重叠', // name: "二级报警数",
// itemStyle: { // data: yData2,
// // borderRadius: [20, 20, 6, 6], // label: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, yData3GradientColor), // show: true,
// } // color: '#eee'
// }, // },
{ // barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
type: 'line', // // stack:'重叠',
name: '报警率(%)', // itemStyle: {
data: yData3, // // borderRadius: [20, 20, 6, 6],
yAxisIndex: 1, // 1表示以右侧Y轴为基准 0表示以左侧Y轴为基准 // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, yData3GradientColor),
symbolSize: 10, // 圆点大小 // }
// },
{
type: "line",
name: "报警率(%)",
data: yData3,
yAxisIndex: 1, // 1表示以右侧Y轴为基准 0表示以左侧Y轴为基准
symbolSize: 10, // 圆点大小
// itemStyle: { // itemStyle: {
// color: '#74DER1', // 折线图小圆点颜色 // color: '#74DER1', // 折线图小圆点颜色
// }, // },
lineStyle: { lineStyle: {
color: '#DE390F', color: "#DE390F",
}, },
label: { label: {
show: true, show: true,
color: '#ddd', color: "#ddd",
formatter: '{c}%' // {c}数据值 formatter: "{c}%", // {c}数据值
}, },
} },
] ],
}; };
this.myChart = echarts.init(this.$refs.qdCityMap1) this.myChart = echarts.init(this.$refs.qdCityMap1);
this.myChart.setOption(option); this.myChart.setOption(option);
}, },
},
};
} </script>
}; <style>
</script> .title {
<style> padding-left: 10px;
.title { color: #212121;
padding-left: 10px; font-size: 20px;
color: #212121; margin-bottom: 10px;
font-size: 20px; margin-top: 10px;
margin-bottom: 10px;
margin-top: 10px;
background-position-y: 7px;
}
</style>
background-position-y: 7px;
}
</style>