ZhangBin
/
chinese-medicine
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

首页数据统计图

master
aBin 5 years ago
parent
f6429c5474
commit
fdd9e6e528
6 changed files with 440 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/App.vue
  2. 100
      src/components/Echarts/Categorymap.vue
  3. 166
      src/components/Echarts/Cisualmap.vue
  4. 74
      src/components/Echarts/Piemap.vue
  5. 80
      src/components/Echarts/Treemap.vue
  6. 20
      src/views/Index/Index.vue

9
src/App.vue
View File

@ -1,15 +1,8 @@
<!--
* @Author: wally
* @email: 18603454788@163.com
* @Date: 2021-01-28 09:32:34
* @LastEditors: wally
* @LastEditTime: 2021-01-29 10:57:06
-->
<template>
<a-config-provider :locale="zh_CN">
<div class="d-flex flex-row flex-nowrap" id="app">
<btn-con />
<router-view class="d-flex"></router-view>
<router-view class="flex-1"></router-view>
</div>
</a-config-provider>
</template>

100
src/components/Echarts/Categorymap.vue
View File

@ -0,0 +1,100 @@
<template>
<!-- <div>数据统计组件</div> -->
<div style="width: 100%; height: 300px" class="chart-box">
<div id="Categorymap" style="height: 400px"></div>
</div>
</template>
<script>
export default {
name: 'Categorymap',
data() {
return {
// msg: 'Welcome to Your Vue.js App',
width: '',
height: '',
timer: null,
};
},
mounted() {
this.drawLine();
this.timer = setInterval(() => {
this.drawLine();
}, 10000);
let wh = window.innerWidth;
let hg = window.innerHeight;
this.width = wh + 'px';
this.height = hg + 'px';
console.log(this.height);
window.onresize = () => {
return (() => {
wh = window.innerWidth;
hg = window.innerHeight;
this.width = wh + 'px';
this.height = hg + 'px';
})();
};
},
destroyed() {
clearInterval(this.timer);
},
methods: {
async drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('Categorymap'));
// 绘制图表
var option = {
title: {
left: 'center',
text: '各院病例分析',
},
legend: {
data: ['未完成', '已完成', '进行中', '废弃'],
top: 30,
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['附属医院', '人民医院', '第五人民医院', '国药同煤总医院'],
},
],
yAxis: [{ type: 'value' }],
series: [
{
name: '未完成',
type: 'bar',
barGap: 0,
// label: labelOption,
emphasis: { focus: 'series' },
data: [320, 332, 301, 334],
},
{
name: '已完成',
type: 'bar',
// label: labelOption,
emphasis: { focus: 'series' },
data: [220, 182, 191, 234],
},
{
name: '进行中',
type: 'bar',
// label: labelOption,
emphasis: { focus: 'series' },
data: [150, 232, 201, 154],
},
{
name: '废弃',
type: 'bar',
// label: labelOption,
emphasis: { focus: 'series' },
data: [98, 77, 101, 99],
},
],
};
myChart.setOption(option);
},
},
};
</script>
<style lang="stylus" scoped ></style>

166
src/components/Echarts/Cisualmap.vue
View File

@ -0,0 +1,166 @@
<template>
<!-- <div>数据统计组件</div> -->
<div style="width: 100%; height: 300px" class="chart-box">
<div id="Cisualmap" style="height: 400px"></div>
</div>
</template>
<script>
export default {
name: 'Cisualmap',
data() {
return {
// msg: 'Welcome to Your Vue.js App',
width: '',
height: '',
timer: null,
};
},
mounted() {
this.drawLine();
this.timer = setInterval(() => {
this.drawLine();
}, 10000);
let wh = window.innerWidth;
let hg = window.innerHeight;
this.width = wh + 'px';
this.height = hg + 'px';
console.log(this.height);
window.onresize = () => {
return (() => {
wh = window.innerWidth;
hg = window.innerHeight;
this.width = wh + 'px';
this.height = hg + 'px';
})();
};
},
destroyed() {
clearInterval(this.timer);
},
methods: {
async drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('Cisualmap'));
var data = [
['2000-06-05', 116],
['2000-06-06', 129],
['2000-06-07', 135],
['2000-06-08', 86],
['2000-06-09', 73],
['2000-06-10', 85],
['2000-06-11', 73],
['2000-06-12', 68],
['2000-06-13', 92],
['2000-06-14', 130],
['2000-06-15', 245],
['2000-06-16', 139],
['2000-06-17', 115],
['2000-06-18', 111],
['2000-06-19', 309],
['2000-06-20', 206],
['2000-06-21', 137],
['2000-06-22', 128],
['2000-06-23', 85],
['2000-06-24', 94],
['2000-06-25', 71],
['2000-06-26', 106],
['2000-06-27', 84],
['2000-06-28', 93],
['2000-06-29', 85],
['2000-06-30', 73],
['2000-07-01', 83],
['2000-07-02', 125],
['2000-07-03', 107],
['2000-07-04', 82],
['2000-07-05', 44],
['2000-07-06', 72],
['2000-07-07', 106],
['2000-07-08', 107],
['2000-07-09', 66],
['2000-07-10', 91],
['2000-07-11', 92],
['2000-07-12', 113],
['2000-07-13', 107],
['2000-07-14', 131],
['2000-07-15', 111],
['2000-07-16', 64],
['2000-07-17', 69],
['2000-07-18', 88],
['2000-07-19', 77],
['2000-07-20', 83],
['2000-07-21', 111],
['2000-07-22', 57],
['2000-07-23', 55],
['2000-07-24', 60],
];
var dateList = data.map(function(item) {
return item[0];
});
var valueList = data.map(function(item) {
return item[1];
});
// 绘制图表
var option = {
// Make gradient line here
visualMap: [
{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400,
},
{
show: false,
type: 'continuous',
seriesIndex: 1,
dimension: 0,
min: 0,
max: dateList.length - 1,
},
],
title: [
{
left: 'center',
text: '新建病例',
},
{
top: '55%',
left: 'center',
text: '已完成病例',
},
],
tooltip: { trigger: 'axis' },
xAxis: [
{ data: dateList },
{
data: dateList,
gridIndex: 1,
},
],
yAxis: [{}, { gridIndex: 1 }],
grid: [{ bottom: '60%' }, { top: '60%' }],
series: [
{
type: 'line',
showSymbol: false,
data: valueList,
},
{
type: 'line',
showSymbol: false,
data: valueList,
xAxisIndex: 1,
yAxisIndex: 1,
},
],
};
myChart.setOption(option);
},
},
};
</script>
<style lang="stylus" scoped ></style>

74
src/components/Echarts/Piemap.vue
View File

@ -0,0 +1,74 @@
<template>
<!-- <div>数据统计组件</div> -->
<div style="width: 100%; height: 300px" class="chart-box">
<div id="Piemap" style="height: 300px"></div>
</div>
</template>
<script>
export default {
name: 'Piemap',
data() {
return {
// msg: 'Welcome to Your Vue.js App',
width: '',
height: '',
timer: null,
};
},
mounted() {
this.drawLine();
this.timer = setInterval(() => {
this.drawLine();
}, 10000);
let wh = window.innerWidth;
let hg = window.innerHeight;
this.width = wh + 'px';
this.height = hg + 'px';
console.log(this.height);
window.onresize = () => {
return (() => {
wh = window.innerWidth;
hg = window.innerHeight;
this.width = wh + 'px';
this.height = hg + 'px';
})();
};
},
destroyed() {
clearInterval(this.timer);
},
methods: {
async drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('Piemap'));
// 绘制图表
var option = {
title: {
left: 'center',
text: '各医院生物样本统计',
},
legend: { top: 'bottom' },
series: [
{
name: '面积模式',
type: 'pie',
radius: [20, 120],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: { borderRadius: 8 },
data: [
{ value: 40, name: '附属医院' },
{ value: 38, name: '人民医院' },
{ value: 32, name: '第五医院' },
{ value: 30, name: '国药同煤总医院' },
],
},
],
};
myChart.setOption(option);
},
},
};
</script>
<style lang="stylus" scoped ></style>

80
src/components/Echarts/Treemap.vue
View File

@ -0,0 +1,80 @@
<template>
<!-- <div>数据统计组件</div> -->
<div style="width: 100%; height: 300px" class="chart-box">
<div id="Treemap" style="height: 400px"></div>
</div>
</template>
<script>
export default {
name: 'Treemap',
data() {
return {
// msg: 'Welcome to Your Vue.js App',
width: '',
height: '',
timer: null,
};
},
mounted() {
this.drawLine();
this.timer = setInterval(() => {
this.drawLine();
}, 10000);
let wh = window.innerWidth;
let hg = window.innerHeight;
this.width = wh + 'px';
this.height = hg + 'px';
console.log(this.height);
window.onresize = () => {
return (() => {
wh = window.innerWidth;
hg = window.innerHeight;
this.width = wh + 'px';
this.height = hg + 'px';
})();
};
},
destroyed() {
clearInterval(this.timer);
},
methods: {
async drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('Treemap'));
// 绘制图表
var option = {
title: {
left: 'center',
text: '每日病例统计',
},
series: [
{
type: 'treemap',
data: [
{
name: '未完成', // First tree
value: 50,
},
{
name: '已完成', // Second tree
value: 25,
},
{
name: '进行中', // Second tree
value: 10,
},
{
name: '废弃', // Second tree
value: 5,
},
],
},
],
};
myChart.setOption(option);
},
},
};
</script>
<style lang="stylus" scoped ></style>

20
src/views/Index/Index.vue
View File

@ -1,10 +1,28 @@
<template>
<div>首页数据统计图界面</div>
<div class="flex-wrap">
<div style="width: 80%; height: auto; margin: 100px 10%">
<treemap />
</div>
<div style="width: 80%; height: auto; margin: 100px 10%">
<cisualmap />
</div>
<div style="width: 80%; height: auto; margin: 100px 10%">
<categorymap />
</div>
<div style="width: 80%; height: auto; margin: 100px 10%">
<piemap />
</div>
</div>
</template>
<script>
import Treemap from 'components/Echarts/Treemap.vue';
import Cisualmap from 'components/Echarts/Cisualmap.vue';
import Categorymap from 'components/Echarts/Categorymap.vue';
import Piemap from 'components/Echarts/Piemap.vue';
export default {
name: 'Index',
components: { Treemap, Cisualmap, Categorymap, Piemap },
data() {
return {
str: '',

Write Preview
Loading…
Cancel
Save