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
Split 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>
<!-- <div>数据统计组件</div> -->
<div style="width: 100%; height: 300px" class="chart-box">
<div id="Categorymap" style="height: 400px"></div>
<div style="width: 100%; height: 350px" class="chart-box">
<div id="Categorymap" style="height: 350px"></div>
</div>
</template>
<script>
@ -43,10 +50,6 @@ export default {
let myChart = this.$echarts.init(document.getElementById('Categorymap'));
// 绘制图表
var option = {
title: {
left: 'center',
text: '各院病例分析',
},
legend: {
data: ['未完成', '已完成', '进行中', '废弃'],
top: 30,
@ -67,6 +70,30 @@ export default {
// label: labelOption,
emphasis: { focus: 'series' },
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: '已完成',
@ -74,6 +101,30 @@ export default {
// label: labelOption,
emphasis: { focus: 'series' },
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: '进行中',
@ -81,6 +132,30 @@ export default {
// label: labelOption,
emphasis: { focus: 'series' },
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: '废弃',
@ -88,6 +163,30 @@ export default {
// label: labelOption,
emphasis: { focus: 'series' },
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>
<!-- <div>数据统计组件</div> -->
<div style="width: 100%; height: 300px" class="chart-box">
<div id="Cisualmap" style="height: 400px"></div>
<div id="Cisualmap" style="height: 350px"></div>
</div>
</template>
<script>

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

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

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

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

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 {
Pagination,
@ -29,6 +36,7 @@ import {
Progress,
carousel,
Spin,
Card,
} from 'ant-design-vue';
import { ConfigProvider } from 'ant-design-vue';
Vue.component(ConfigProvider.name, ConfigProvider);
@ -59,6 +67,7 @@ Vue.use(BackTop);
Vue.use(Progress);
Vue.use(carousel);
Vue.use(Spin);
Vue.use(Card);
Vue.prototype.$message = message;
Vue.prototype.$notification = notification;

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

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

56
yarn.lock
View File

@ -1718,7 +1718,7 @@
"ansi-styles@^4.1.0":
"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"
dependencies:
"color-convert" "^2.0.1"
@ -4013,6 +4013,11 @@
"resolved" "https://registry.npm.taobao.org/event-pubsub/download/event-pubsub-4.3.0.tgz"
"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":
"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"
@ -4144,7 +4149,7 @@
"assign-symbols" "^1.0.0"
"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="
"resolved" "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz"
"version" "3.0.2"
@ -4187,6 +4192,11 @@
"resolved" "https://registry.npm.taobao.org/fast-diff/download/fast-diff-1.2.0.tgz"
"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":
"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"
@ -6777,6 +6787,11 @@
dependencies:
"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":
"integrity" "sha1-aR0nCeeMefrjoVZiJFLQB2LKqqI="
"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"
"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":
"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"
@ -8788,7 +8824,7 @@
"supports-color@^7.1.0":
"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"
dependencies:
"has-flag" "^4.0.0"
@ -9411,9 +9447,9 @@
"version" "2.3.4"
"vue-loader-v16@npm:vue-loader@^16.0.0-beta.7":
"integrity" "sha1-9bKG1grGiGaExjoXoYQ5HMngGZo="
"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"
"version" "16.1.1"
"integrity" "sha1-XAO2xQ0qX5g8fOuhXFDXjKKymPQ="
"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.2"
dependencies:
"chalk" "^4.1.0"
"hash-sum" "^2.0.0"
@ -9430,6 +9466,14 @@
"vue-hot-reload-api" "^2.3.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":
"integrity" "sha1-SDCE1zKr7RHaeWd4qCZqOvDqGpw="
"resolved" "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz"

Write Preview
Loading…
Cancel
Save