Skip to content

X
xt-whp
Commit 384a3b77 authored by yaqizhang's avatar yaqizhang
Browse files
Options

企业汇集统计

parent 89504068
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 266 additions and 91 deletions
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMapone.vue
View file @ 384a3b77
......@@ -31,13 +31,13 @@
</div>
<!-- </dv-border-box-1> -->
<dv-border-box-12>
<div id="pie2" style="width:450px;height: 370px;padding: 20px 0 0 0;">
<div id="pie2" style="width:450px;height: 350px;padding: 20px 0 0 0;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main2" style="width:450px;height:340px;"></div>
<div id="main2" style="width:450px;height:330px;"></div>
</div>
</dv-border-box-12>
<div class="div-table" style="width:480px;margin-top: 20px;background-color: rgb(0, 0, 0,0);">
<div style="width: 100%;height: 40px;text-align: center;font-size: 18px; line-height: 40px;color: #fff;font-weight: 900;">预警信息</div>
<div class="div-table" style="width:480px;margin-top: 20px;background-color: rgb(0, 0, 0,0);position: fixed;bottom: 0;right: 0;margin-right: 20px;">
<div style="width: 100%;height: 38px;text-align: left;font-size: 16px; line-height: 38px;color: #fff;font-weight: 900;background: #013056;opacity: 0.8;"><span style="margin-left: 10px;">预警信息</span></div>
<el-table :data="$data.tableData" stripe border :header-cell-style="{background:'#02285a',color:'#fff',}">
<el-table-column prop="unitName" label="企业名称" width="110"></el-table-column>
<el-table-column prop="alarmInfo" label="预警信息" width="110">
......@@ -49,6 +49,10 @@
<el-table-column prop="alarmTime" label="预警时间"></el-table-column>
</el-table>
</div>
<div id="pie3" style="width:450px;height: 350px;margin-left: 20px;margin-top: 15px;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main3" style="width:450px;height:330px;"></div>
</div>
</div>
......@@ -57,7 +61,7 @@
<script>// 引入基本模板
import { Component, Vue, Provide } from "vue-property-decorator";
import * as echarts from 'echarts/core';
import {BarChart, PieChart} from 'echarts/charts';
import {BarChart, PieChart, LineChart} from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
......@@ -78,6 +82,7 @@ echarts.use(
GridComponent,
BarChart,
PieChart,
LineChart,
LegendComponent,
DatasetComponent,
CanvasRenderer
......@@ -110,6 +115,7 @@ export default {
},
mounted(){
this.drawPieChart();
this.inPieChart();
this.getStatiData()
},
methods:{
......@@ -166,7 +172,7 @@ export default {
getData2[i] = arr;
}
myChart2.setOption({
xAxis: {
yAxis: {
data: getData2,
},
series:[{
......@@ -185,7 +191,13 @@ export default {
color: "#fff",
}
},
tooltip: {},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data:['危险源'],
textStyle: { //图例文字的样式
......@@ -193,13 +205,47 @@ export default {
}
},
xAxis: {
axisLabel: {
interval:0,
rotate:40
} ,
type: 'value',
axisLabel: {
show:true,
interval:0,
rotate:40
} ,
//X轴白线
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(71, 126, 171, 1)',
type: 'dashed'
},
},
data: [],
},
yAxis: {},
yAxis: {
type: 'category',
inverse: true, //倒叙
axisLabel:{
show: true,
rich: {
flag: {
fontSize: 25,
padding: 5
}
}
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
},
series: [{
name: '危险源',
type: 'bar',
......@@ -211,6 +257,146 @@ export default {
fontSize: 18
},
});
},
inPieChart(){
// 基于准备好的dom，初始化echarts实例
var myChart3 = echarts.init(document.getElementById('main3'));
// let that=this;
// var getData1 = [];
// var getData2 = [];
// METHOD.axiosGet(
// this,
// `/enterpriseGoods/getNumberByEnterprise`,
// function(res) {
// if (res.code === 0) {
// //先进行赋值
// for(let i=0; i<res.data.result.length; i++) {
// var obj = new Object();
// var arr = new Object();
// // obj = res.data.result[i].number;
// // arr = res.data.result[i].type;
// obj = res.data.result[i].number;
// arr = res.data.result[i].name;
// getData1[i] = obj;
// getData2[i] = arr;
// }
// myChart2.setOption({
// yAxis: {
// data: getData2,
// },
// series:[{
// data: getData1,
// }]
// })
// }
// });
// 绘制图表
myChart3.setOption({
title: {
text: '隐患和风险控制',//主标题
color: '#fff',
// subtext: '柱状图',
textStyle: {
color: "#fff",
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
legend: {
data: ['隐患', '风险'],
textStyle: { //图例文字的样式
color: '#fff',
}
},
xAxis: [
{
type: 'category',
axisLabel: {
show:true,
interval:0,
rotate:40
} ,
//X轴白线
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
data: ['测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
axisLabel:{
show: true,
rich: {
flag: {
fontSize: 25,
padding: 5
}
}
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(71, 126, 171, 1)',
type: 'dashed'
},
},
},
{
type: 'value',
interval: 5,
}
],
series: [
{
name: '隐患',
type: 'bar',
data: [
400, 1300, 700, 1000, 1500, 1800, 200, 300, 2000, 1000, 1300
]
},
{
name: '风险',
type: 'line',
// symbol:'circle',
symbolSize:6,
data: [1000,1300, 1450, 1600, 1700, 1800, 1850, 1800, 1700, 1600, 1500],
itemStyle : {normal : {color:'#00D7FE', //改变折线点的颜色
lineStyle:{color:'#00D7FE'} //改变折线颜色
},
},
}
]
})
}
}
}
......@@ -256,7 +442,7 @@ export default {
background-color: #2c5794 !important;
}
.pie .div-table .el-table--border, .el-table--group {
height: 200px;
height: 160px;
border: 0px solid !important;
background-color: rgb(0, 0, 0,0);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment