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 @@ ...@@ -31,13 +31,13 @@
</div> </div>
<!-- </dv-border-box-1> --> <!-- </dv-border-box-1> -->
<dv-border-box-12> <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 --> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main2" style="width:450px;height:340px;"></div> <div id="main2" style="width:450px;height:330px;"></div>
</div> </div>
</dv-border-box-12> </dv-border-box-12>
<div class="div-table" style="width:480px;margin-top: 20px;background-color: rgb(0, 0, 0,0);"> <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: 40px;text-align: center;font-size: 18px; line-height: 40px;color: #fff;font-weight: 900;">预警信息</div> <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 :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="unitName" label="企业名称" width="110"></el-table-column>
<el-table-column prop="alarmInfo" label="预警信息" width="110"> <el-table-column prop="alarmInfo" label="预警信息" width="110">
...@@ -49,6 +49,10 @@ ...@@ -49,6 +49,10 @@
<el-table-column prop="alarmTime" label="预警时间"></el-table-column> <el-table-column prop="alarmTime" label="预警时间"></el-table-column>
</el-table> </el-table>
</div> </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> </div>
...@@ -57,7 +61,7 @@ ...@@ -57,7 +61,7 @@
<script>// 引入基本模板 <script>// 引入基本模板
import { Component, Vue, Provide } from "vue-property-decorator"; import { Component, Vue, Provide } from "vue-property-decorator";
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import {BarChart, PieChart} from 'echarts/charts'; import {BarChart, PieChart, LineChart} from 'echarts/charts';
import { import {
TitleComponent, TitleComponent,
TooltipComponent, TooltipComponent,
...@@ -78,6 +82,7 @@ echarts.use( ...@@ -78,6 +82,7 @@ echarts.use(
GridComponent, GridComponent,
BarChart, BarChart,
PieChart, PieChart,
LineChart,
LegendComponent, LegendComponent,
DatasetComponent, DatasetComponent,
CanvasRenderer CanvasRenderer
...@@ -110,6 +115,7 @@ export default { ...@@ -110,6 +115,7 @@ export default {
}, },
mounted(){ mounted(){
this.drawPieChart(); this.drawPieChart();
this.inPieChart();
this.getStatiData() this.getStatiData()
}, },
methods:{ methods:{
...@@ -166,7 +172,7 @@ export default { ...@@ -166,7 +172,7 @@ export default {
getData2[i] = arr; getData2[i] = arr;
} }
myChart2.setOption({ myChart2.setOption({
xAxis: { yAxis: {
data: getData2, data: getData2,
}, },
series:[{ series:[{
...@@ -185,7 +191,13 @@ export default { ...@@ -185,7 +191,13 @@ export default {
color: "#fff", color: "#fff",
} }
}, },
tooltip: {}, tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: { legend: {
data:['危险源'], data:['危险源'],
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
...@@ -193,13 +205,47 @@ export default { ...@@ -193,13 +205,47 @@ export default {
} }
}, },
xAxis: { xAxis: {
axisLabel: { type: 'value',
interval:0, axisLabel: {
rotate:40 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: [], data: [],
}, },
yAxis: {}, yAxis: {
type: 'category',
inverse: true, //倒叙
axisLabel:{
show: true,
rich: {
flag: {
fontSize: 25,
padding: 5
}
}
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
},
series: [{ series: [{
name: '危险源', name: '危险源',
type: 'bar', type: 'bar',
...@@ -211,6 +257,146 @@ export default { ...@@ -211,6 +257,146 @@ export default {
fontSize: 18 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 { ...@@ -256,7 +442,7 @@ export default {
background-color: #2c5794 !important; background-color: #2c5794 !important;
} }
.pie .div-table .el-table--border, .el-table--group { .pie .div-table .el-table--border, .el-table--group {
height: 200px; height: 160px;
border: 0px solid !important; border: 0px solid !important;
background-color: rgb(0, 0, 0,0); 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