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> |
|||
Loading…
Reference in new issue