|
@@ -2,7 +2,7 @@
|
|
|
<div>
|
|
|
<div>
|
|
|
<h2>监测任务统计</h2>
|
|
|
- <div id="monitor" style="width:100%;height:400px;">
|
|
|
+ <div id="monitor" style="width:100%;height:400px;" ref="liXing_ref">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -15,22 +15,42 @@
|
|
|
export default {
|
|
|
data(){
|
|
|
return {
|
|
|
- monitorData:'',
|
|
|
- task_class:'例行监测'
|
|
|
+ monitorData:[],
|
|
|
+ queryInfo:{
|
|
|
+ task_class:'例行监测'
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.stasticalTasks();
|
|
|
+ this.stasticalTasks();//调用接口函数
|
|
|
+
|
|
|
+ this.myChart();
|
|
|
},
|
|
|
methods:{
|
|
|
async stasticalTasks(){
|
|
|
- const result = await this.$http.post("stasticalTasks",{task_class});
|
|
|
- this.monitorData = this.result.data.data
|
|
|
+ const result = await this.$http.post("stasticalTasks",this.queryInfo);
|
|
|
+ if (result.data.code == 0){
|
|
|
+ this.monitorData = result.data.data
|
|
|
+ var td = []
|
|
|
+ for(let key in this.monitorData){
|
|
|
+ td.push(this.monitorData[key])
|
|
|
+ }
|
|
|
+ console.log(td)
|
|
|
+ this.monitorData = td
|
|
|
+ this.myChart();
|
|
|
+ }else{
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: '获取图表失败!'
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
- stasticalTasks () {
|
|
|
+
|
|
|
+ myChart () {
|
|
|
//第一步:实例化对象
|
|
|
const monitorChart = this.$echarts.init(document.getElementById('monitor'))
|
|
|
//第二步:指定配置项和数据
|
|
@@ -54,6 +74,7 @@ export default {
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: ['已完成', '未完成', '未发布', '已发布', '已废止'],
|
|
|
+ // data:this.xData,
|
|
|
axisTick: {
|
|
|
alignWithLabel: true //轴刻度 --与标签对齐
|
|
|
},
|
|
@@ -70,6 +91,7 @@ export default {
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
+ name: '数量'
|
|
|
}
|
|
|
],
|
|
|
//
|
|
@@ -77,7 +99,7 @@ export default {
|
|
|
{
|
|
|
type: 'bar', // type值设置图表类型,bar为柱状图
|
|
|
barWidth: '30%', // 柱形的宽度
|
|
|
- data: [10, 52, 200, 334, 390 ],
|
|
|
+ data:this.monitorData,
|
|
|
showBackground: true,//是否显示背景色
|
|
|
backgroundStyle: {
|
|
|
color: 'rgba(180, 180, 180, 0.2)'
|
|
@@ -85,7 +107,7 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
-//第三步:把配置项给实例对象
|
|
|
+//第三步:把配置项给实例对象(绘制)
|
|
|
monitorChart.setOption(monitorData)
|
|
|
}
|
|
|
}
|