12 changed files with 797 additions and 593 deletions
@ -0,0 +1,130 @@ |
|||||
|
<!-- |
||||
|
* @Author: wally |
||||
|
* @email: 18603454788@163.com |
||||
|
* @Date: 2021-01-29 14:45:02 |
||||
|
* @LastEditors: wally |
||||
|
* @LastEditTime: 2021-02-19 15:50:23 |
||||
|
--> |
||||
|
<template> |
||||
|
<!-- <div>数据统计组件</div> --> |
||||
|
<div style="width: 100%; height: 500px" class="chart-box"> |
||||
|
<div id="Analysis" style="height: 500px"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { HospitalComplete } from 'config/api'; |
||||
|
export default { |
||||
|
name: 'Analysis', |
||||
|
props: { |
||||
|
lists: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// msg: 'Welcome to Your Vue.js App', |
||||
|
width: '', |
||||
|
height: '', |
||||
|
nameList: [], // 对照组名称数组 |
||||
|
dataList: [], |
||||
|
series: [], |
||||
|
colorList: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'], |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
lists() { |
||||
|
this.nameList = []; |
||||
|
this.dataList = []; |
||||
|
this.series = []; |
||||
|
// 遍历 对照组 数组 |
||||
|
for (let i = 0; i < this.lists.selGroupNums.length; i++) { |
||||
|
// 把所有搜索出来的对照组,组成一个数组作为Y轴 |
||||
|
this.nameList.push(this.lists.selGroupNums[i].name); |
||||
|
let arr = []; |
||||
|
// 遍历 横坐标 数组 |
||||
|
for (let j = 0; j < this.lists.stringList.length; j++) { |
||||
|
// 遍历 每个对照组 下的list数组 |
||||
|
for (let k = 0; k < this.lists.selGroupNums[i].list.length; k++) { |
||||
|
// 当 某个横坐标 等于 某个对照组下的list数组的content时,添加 content 和 value |
||||
|
if (this.lists.selGroupNums[i].list[k].content === this.lists.stringList[j]) { |
||||
|
let obj = { |
||||
|
name: this.lists.selGroupNums[i].list[k].content, |
||||
|
value: this.lists.selGroupNums[i].list[k].nums, |
||||
|
}; |
||||
|
arr.push(obj); |
||||
|
break; |
||||
|
// 当 不等于 且 当前处于 list数组最后一位时 |
||||
|
} else if (k === this.lists.selGroupNums[i].list.length - 1) { |
||||
|
let obj = { |
||||
|
name: this.lists.stringList[i], |
||||
|
value: 0, |
||||
|
}; |
||||
|
arr.push(obj); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.dataList.push(arr); |
||||
|
} |
||||
|
// 遍历 存储的数组 ,动态生成统计图的数据 |
||||
|
for (let i = 0; i < this.dataList[0].length; i++) { |
||||
|
let arr1 = []; |
||||
|
for (let k = 0; k < this.dataList.length; k++) { |
||||
|
arr1.push(this.dataList[k][i].value); |
||||
|
} |
||||
|
let obj = { |
||||
|
name: this.dataList[0][i].name, |
||||
|
type: 'bar', |
||||
|
stack: 'total', |
||||
|
label: { show: true }, |
||||
|
itemStyle: { color: this.colorList[`${i % 5}`] }, |
||||
|
emphasis: { focus: 'series' }, |
||||
|
data: arr1, |
||||
|
}; |
||||
|
this.series.push(obj); |
||||
|
} |
||||
|
this.drawLine(); |
||||
|
console.log(this.dataList); |
||||
|
console.log(this.series); |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.drawLine(); |
||||
|
}, |
||||
|
methods: { |
||||
|
drawLine() { |
||||
|
// 基于准备好的dom,初始化echarts实例 |
||||
|
let myChart = this.$echarts.init(document.getElementById('Analysis')); |
||||
|
// 绘制图表 |
||||
|
var option = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// 坐标轴指示器,坐标轴触发有效 |
||||
|
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow' |
||||
|
}, |
||||
|
}, |
||||
|
legend: { data: this.lists.stringList }, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { type: 'value' }, |
||||
|
yAxis: { |
||||
|
type: 'category', |
||||
|
data: this.nameList, |
||||
|
}, |
||||
|
series: this.series, |
||||
|
}; |
||||
|
myChart.setOption(option); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped ></style> |
File diff suppressed because it is too large
Loading…
Reference in new issue