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

首页数据统计图

master
aBin 5 years ago
parent
e6e58ce578
commit
95c7b335ba
8 changed files with 16301 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16107
      package-lock.json
  2. 111
      src/components/Echarts/Categorymap.vue
  3. 2
      src/components/Echarts/Cisualmap.vue
  4. 4
      src/components/Echarts/Piemap.vue
  5. 43
      src/components/Echarts/Treemap.vue
  6. 9
      src/plugins/ant-design-vue.js
  7. 24
      src/views/Index/Index.vue
  8. 56
      yarn.lock

16107
package-lock.json
View File

File diff suppressed because it is too large

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

@ -1,7 +1,14 @@
<!--
* @Author: wally
* @email: 18603454788@163.com
* @Date: 2021-01-29 14:45:02
* @LastEditors: wally
* @LastEditTime: 2021-01-29 18:20:26
-->
<template> <template>
<!-- <div>数据统计组件</div> --> <!-- <div>数据统计组件</div> -->
<div style="width: 100%; height: 300px" class="chart-box"> <div style="width: 100%; height: 350px" class="chart-box">
<div id="Categorymap" style="height: 400px"></div> <div id="Categorymap" style="height: 350px"></div>
</div> </div>
</template> </template>
<script> <script>
@ -43,10 +50,6 @@ export default {
let myChart = this.$echarts.init(document.getElementById('Categorymap')); let myChart = this.$echarts.init(document.getElementById('Categorymap'));
// 绘制图表 // 绘制图表
var option = { var option = {
title: {
left: 'center',
text: '各院病例分析',
},
legend: { legend: {
data: ['未完成', '已完成', '进行中', '废弃'], data: ['未完成', '已完成', '进行中', '废弃'],
top: 30, top: 30,
@ -67,6 +70,30 @@ export default {
// label: labelOption, // label: labelOption,
emphasis: { focus: 'series' }, emphasis: { focus: 'series' },
data: [320, 332, 301, 334], data: [320, 332, 301, 334],
barWidth: 20,
itemStyle: {
normal: {
label: {
formatter: '{c}',
show: true,
position: 'top',
textStyle: {
fontSize: '12',
color: '#000',
},
},
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FCB155' }, //柱图渐变色
{ offset: 1, color: '#EC535F' }, //柱图渐变色
]),
},
emphasis: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FCB155' }, //柱图高亮渐变色
{ offset: 1, color: '#EC535F' }, //柱图高亮渐变色
]),
},
},
}, },
{ {
name: '已完成', name: '已完成',
@ -74,6 +101,30 @@ export default {
// label: labelOption, // label: labelOption,
emphasis: { focus: 'series' }, emphasis: { focus: 'series' },
data: [220, 182, 191, 234], data: [220, 182, 191, 234],
barWidth: 20,
itemStyle: {
normal: {
label: {
formatter: '{c}',
show: true,
position: 'top',
textStyle: {
fontSize: '12',
color: '#000',
},
},
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#6D46FF' }, //柱图渐变色
{ offset: 1, color: '#360CE6' }, //柱图渐变色
]),
},
emphasis: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#6D46FF' }, //柱图高亮渐变色
{ offset: 1, color: '#360CE6' }, //柱图高亮渐变色
]),
},
},
}, },
{ {
name: '进行中', name: '进行中',
@ -81,6 +132,30 @@ export default {
// label: labelOption, // label: labelOption,
emphasis: { focus: 'series' }, emphasis: { focus: 'series' },
data: [150, 232, 201, 154], data: [150, 232, 201, 154],
barWidth: 20,
itemStyle: {
normal: {
label: {
formatter: '{c}',
show: true,
position: 'top',
textStyle: {
fontSize: '12',
color: '#000',
},
},
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#96E5F4' }, //柱图渐变色
{ offset: 1, color: '#21B0DC' }, //柱图渐变色
]),
},
emphasis: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#96E5F4' }, //柱图高亮渐变色
{ offset: 1, color: '#21B0DC' }, //柱图高亮渐变色
]),
},
},
}, },
{ {
name: '废弃', name: '废弃',
@ -88,6 +163,30 @@ export default {
// label: labelOption, // label: labelOption,
emphasis: { focus: 'series' }, emphasis: { focus: 'series' },
data: [98, 77, 101, 99], data: [98, 77, 101, 99],
barWidth: 20,
itemStyle: {
normal: {
label: {
formatter: '{c}',
show: true,
position: 'top',
textStyle: {
fontSize: '12',
color: '#000',
},
},
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#F5D041' }, //柱图渐变色
{ offset: 1, color: '#FF9000' }, //柱图渐变色
]),
},
emphasis: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#F5D041' }, //柱图高亮渐变色
{ offset: 1, color: '#FF9000' }, //柱图高亮渐变色
]),
},
},
}, },
], ],
}; };

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

@ -1,7 +1,7 @@
<template> <template>
<!-- <div>数据统计组件</div> --> <!-- <div>数据统计组件</div> -->
<div style="width: 100%; height: 300px" class="chart-box"> <div style="width: 100%; height: 300px" class="chart-box">
<div id="Cisualmap" style="height: 400px"></div> <div id="Cisualmap" style="height: 350px"></div>
</div> </div>
</template> </template>
<script> <script>

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

@ -43,10 +43,6 @@ export default {
let myChart = this.$echarts.init(document.getElementById('Piemap')); let myChart = this.$echarts.init(document.getElementById('Piemap'));
// 绘制图表 // 绘制图表
var option = { var option = {
title: {
left: 'center',
text: '各医院生物样本统计',
},
legend: { top: 'bottom' }, legend: { top: 'bottom' },
series: [ series: [
{ {

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

@ -1,7 +1,7 @@
<template> <template>
<!-- <div>数据统计组件</div> --> <!-- <div>数据统计组件</div> -->
<div style="width: 100%; height: 300px" class="chart-box"> <div style="width: 100%; height: 300px" class="chart-box">
<div id="Treemap" style="height: 400px"></div> <div id="Treemap" style="height: 300px"></div>
</div> </div>
</template> </template>
<script> <script>
@ -43,29 +43,32 @@ export default {
let myChart = this.$echarts.init(document.getElementById('Treemap')); let myChart = this.$echarts.init(document.getElementById('Treemap'));
// 绘制图表 // 绘制图表
var option = { var option = {
title: { tooltip: { trigger: 'axis' },
left: 'center', radar: [
text: '每日病例统计', {
}, indicator: [
{ text: '未完成', max: 100 },
{ text: '已完成', max: 100 },
{ text: '进行中', max: 100 },
{ text: '废弃', max: 100 },
],
center: ['50%', '50%'],
radius: 120,
},
],
series: [ series: [
{ {
type: 'treemap', type: 'radar',
tooltip: {
trigger: 'item',
},
areaStyle: { color: 'rgba(84,112,198,0.9)' },
lineStyle: { color: 'rgb(84,112,198)' },
itemStyle: { color: 'rgb(84,112,198)' },
data: [ data: [
{ {
name: '未完成', // First tree value: [80, 80, 60, 40],
value: 50, name: '病例统计',
},
{
name: '已完成', // Second tree
value: 25,
},
{
name: '进行中', // Second tree
value: 10,
},
{
name: '废弃', // Second tree
value: 5,
}, },
], ],
}, },

9
src/plugins/ant-design-vue.js
View File

@ -1,3 +1,10 @@
/*
* @Author: wally
* @email: 18603454788@163.com
* @Date: 2021-01-29 11:16:27
* @LastEditors: wally
* @LastEditTime: 2021-01-29 17:39:07
*/
import Vue from 'vue'; import Vue from 'vue';
import { import {
Pagination, Pagination,
@ -29,6 +36,7 @@ import {
Progress, Progress,
carousel, carousel,
Spin, Spin,
Card,
} from 'ant-design-vue'; } from 'ant-design-vue';
import { ConfigProvider } from 'ant-design-vue'; import { ConfigProvider } from 'ant-design-vue';
Vue.component(ConfigProvider.name, ConfigProvider); Vue.component(ConfigProvider.name, ConfigProvider);
@ -59,6 +67,7 @@ Vue.use(BackTop);
Vue.use(Progress); Vue.use(Progress);
Vue.use(carousel); Vue.use(carousel);
Vue.use(Spin); Vue.use(Spin);
Vue.use(Card);
Vue.prototype.$message = message; Vue.prototype.$message = message;
Vue.prototype.$notification = notification; Vue.prototype.$notification = notification;

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

@ -1,16 +1,24 @@
<template> <template>
<div class="flex-wrap"> <div class="flex-wrap">
<div style="width: 80%; height: auto; margin: 100px 10%"> <div style="width: 96%; height: auto; margin: 10px 2%">
<treemap /> <a-card title="病例统计" style="width: 100%; height: 400px">
<treemap />
</a-card>
</div> </div>
<div style="width: 80%; height: auto; margin: 100px 10%"> <div style="width: 96%; height: auto; margin: 10px 2%">
<cisualmap /> <a-card title="各院病例分析" style="width: 100%; height: 400px">
<categorymap />
</a-card>
</div> </div>
<div style="width: 80%; height: auto; margin: 100px 10%"> <div style="width: 96%; height: auto; margin: 10px 2%">
<categorymap /> <a-card title="每日病例统计" style="width: 100%; height: 400px">
<cisualmap />
</a-card>
</div> </div>
<div style="width: 80%; height: auto; margin: 100px 10%"> <div style="width: 96%; height: auto; margin: 10px 2%">
<piemap /> <a-card title="各医院生物样本统计" style="width: 100%; height: 400px">
<piemap />
</a-card>
</div> </div>
</div> </div>
</template> </template>

56
yarn.lock
View File

@ -1718,7 +1718,7 @@
"ansi-styles@^4.1.0": "ansi-styles@^4.1.0":
"integrity" "sha1-7dgDYornHATIWuegkG7a00tkiTc=" "integrity" "sha1-7dgDYornHATIWuegkG7a00tkiTc="
"resolved" "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1601839122515&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz" "resolved" "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1611327117754&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz"
"version" "4.3.0" "version" "4.3.0"
dependencies: dependencies:
"color-convert" "^2.0.1" "color-convert" "^2.0.1"
@ -4013,6 +4013,11 @@
"resolved" "https://registry.npm.taobao.org/event-pubsub/download/event-pubsub-4.3.0.tgz" "resolved" "https://registry.npm.taobao.org/event-pubsub/download/event-pubsub-4.3.0.tgz"
"version" "4.3.0" "version" "4.3.0"
"eventemitter3@^2.0.3":
"integrity" "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
"resolved" "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-2.0.3.tgz?cache=0&sync_timestamp=1598517790184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-2.0.3.tgz"
"version" "2.0.3"
"eventemitter3@^4.0.0": "eventemitter3@^4.0.0":
"integrity" "sha1-Lem2j2Uo1WRO9cWVJqG0oHMGFp8=" "integrity" "sha1-Lem2j2Uo1WRO9cWVJqG0oHMGFp8="
"resolved" "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-4.0.7.tgz?cache=0&sync_timestamp=1598517790184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-4.0.7.tgz" "resolved" "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-4.0.7.tgz?cache=0&sync_timestamp=1598517790184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-4.0.7.tgz"
@ -4144,7 +4149,7 @@
"assign-symbols" "^1.0.0" "assign-symbols" "^1.0.0"
"is-extendable" "^1.0.1" "is-extendable" "^1.0.1"
"extend@~3.0.0", "extend@~3.0.2": "extend@^3.0.2", "extend@~3.0.0", "extend@~3.0.2":
"integrity" "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo=" "integrity" "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo="
"resolved" "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz" "resolved" "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz"
"version" "3.0.2" "version" "3.0.2"
@ -4187,6 +4192,11 @@
"resolved" "https://registry.npm.taobao.org/fast-diff/download/fast-diff-1.2.0.tgz" "resolved" "https://registry.npm.taobao.org/fast-diff/download/fast-diff-1.2.0.tgz"
"version" "1.2.0" "version" "1.2.0"
"fast-diff@1.1.2":
"integrity" "sha1-S2LEK44D3j+EhGC2OQeZIGldAVQ="
"resolved" "https://registry.npm.taobao.org/fast-diff/download/fast-diff-1.1.2.tgz"
"version" "1.1.2"
"fast-glob@^2.2.6": "fast-glob@^2.2.6":
"integrity" "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=" "integrity" "sha1-aVOFfDr6R1//ku5gFdUtpwpM050="
"resolved" "https://registry.npm.taobao.org/fast-glob/download/fast-glob-2.2.7.tgz?cache=0&sync_timestamp=1592290372789&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-glob%2Fdownload%2Ffast-glob-2.2.7.tgz" "resolved" "https://registry.npm.taobao.org/fast-glob/download/fast-glob-2.2.7.tgz?cache=0&sync_timestamp=1592290372789&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-glob%2Fdownload%2Ffast-glob-2.2.7.tgz"
@ -6777,6 +6787,11 @@
dependencies: dependencies:
"no-case" "^2.2.0" "no-case" "^2.2.0"
"parchment@^1.1.4":
"integrity" "sha1-rt7Xq5OP6SHUw0vDOc4RaLwv/eU="
"resolved" "https://registry.npm.taobao.org/parchment/download/parchment-1.1.4.tgz?cache=0&sync_timestamp=1586512365974&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparchment%2Fdownload%2Fparchment-1.1.4.tgz"
"version" "1.1.4"
"parent-module@^1.0.0": "parent-module@^1.0.0":
"integrity" "sha1-aR0nCeeMefrjoVZiJFLQB2LKqqI=" "integrity" "sha1-aR0nCeeMefrjoVZiJFLQB2LKqqI="
"resolved" "https://registry.npm.taobao.org/parent-module/download/parent-module-1.0.1.tgz" "resolved" "https://registry.npm.taobao.org/parent-module/download/parent-module-1.0.1.tgz"
@ -7608,6 +7623,27 @@
"resolved" "https://registry.npm.taobao.org/querystringify/download/querystringify-2.2.0.tgz?cache=0&sync_timestamp=1597686721254&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fquerystringify%2Fdownload%2Fquerystringify-2.2.0.tgz" "resolved" "https://registry.npm.taobao.org/querystringify/download/querystringify-2.2.0.tgz?cache=0&sync_timestamp=1597686721254&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fquerystringify%2Fdownload%2Fquerystringify-2.2.0.tgz"
"version" "2.2.0" "version" "2.2.0"
"quill-delta@^3.6.2":
"integrity" "sha1-sZ/SuJQSMBxg4f8hPY2GDqwPEDI="
"resolved" "https://registry.npm.taobao.org/quill-delta/download/quill-delta-3.6.3.tgz"
"version" "3.6.3"
dependencies:
"deep-equal" "^1.0.1"
"extend" "^3.0.2"
"fast-diff" "1.1.2"
"quill@^1.3.4":
"integrity" "sha1-2lsvOixHDpMjQM2/NmjJ8h+Shug="
"resolved" "https://registry.npm.taobao.org/quill/download/quill-1.3.7.tgz"
"version" "1.3.7"
dependencies:
"clone" "^2.1.1"
"deep-equal" "^1.0.1"
"eventemitter3" "^2.0.3"
"extend" "^3.0.2"
"parchment" "^1.1.4"
"quill-delta" "^3.6.2"
"raf@^3.4.0": "raf@^3.4.0":
"integrity" "sha1-B0LpmkplUvRF1z4+4DKK8P8e3jk=" "integrity" "sha1-B0LpmkplUvRF1z4+4DKK8P8e3jk="
"resolved" "https://registry.npm.taobao.org/raf/download/raf-3.4.1.tgz?cache=0&sync_timestamp=1586264003311&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fraf%2Fdownload%2Fraf-3.4.1.tgz" "resolved" "https://registry.npm.taobao.org/raf/download/raf-3.4.1.tgz?cache=0&sync_timestamp=1586264003311&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fraf%2Fdownload%2Fraf-3.4.1.tgz"
@ -8788,7 +8824,7 @@
"supports-color@^7.1.0": "supports-color@^7.1.0":
"integrity" "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=" "integrity" "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo="
"resolved" "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611732186&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz" "resolved" "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1611394043517&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz"
"version" "7.2.0" "version" "7.2.0"
dependencies: dependencies:
"has-flag" "^4.0.0" "has-flag" "^4.0.0"
@ -9411,9 +9447,9 @@
"version" "2.3.4" "version" "2.3.4"
"vue-loader-v16@npm:vue-loader@^16.0.0-beta.7": "vue-loader-v16@npm:vue-loader@^16.0.0-beta.7":
"integrity" "sha1-9bKG1grGiGaExjoXoYQ5HMngGZo=" "integrity" "sha1-XAO2xQ0qX5g8fOuhXFDXjKKymPQ="
"resolved" "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.1.tgz?cache=0&sync_timestamp=1607093652138&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.1.tgz" "resolved" "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.2.tgz?cache=0&sync_timestamp=1608188050165&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.2.tgz"
"version" "16.1.1" "version" "16.1.2"
dependencies: dependencies:
"chalk" "^4.1.0" "chalk" "^4.1.0"
"hash-sum" "^2.0.0" "hash-sum" "^2.0.0"
@ -9430,6 +9466,14 @@
"vue-hot-reload-api" "^2.3.0" "vue-hot-reload-api" "^2.3.0"
"vue-style-loader" "^4.1.0" "vue-style-loader" "^4.1.0"
"vue-quill-editor@^3.0.6":
"integrity" "sha1-H4VkYhHWijGoCnLLf0W7LxGbyPs="
"resolved" "https://registry.npm.taobao.org/vue-quill-editor/download/vue-quill-editor-3.0.6.tgz"
"version" "3.0.6"
dependencies:
"object-assign" "^4.1.1"
"quill" "^1.3.4"
"vue-ref@^2.0.0": "vue-ref@^2.0.0":
"integrity" "sha1-SDCE1zKr7RHaeWd4qCZqOvDqGpw=" "integrity" "sha1-SDCE1zKr7RHaeWd4qCZqOvDqGpw="
"resolved" "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz" "resolved" "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz"

Write Preview
Loading…
Cancel
Save