ccsens_zhengzhichuan
/
acupuncture
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

年龄分布自定义颜色

newMaster
1747191978@qq.com 4 months ago
parent
bd39beb2bc
commit
939404d827
2 changed files with 7 additions and 955 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. 2
      acupuncture-前台/src/views/indexCom/XGZL.vue
  2. 960
      acupuncture-前台/src/views/indexCom/index.js

2
acupuncture-前台/src/views/indexCom/XGZL.vue
View File

@ -33,7 +33,7 @@
</div>
</el-card>
</div>
<div style="flex: 1; margin-right: 20px">
<div style="flex: 1;">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">病种穴位分布</span>

960
acupuncture-前台/src/views/indexCom/index.js
View File

@ -145,11 +145,16 @@ export const ageEcharts = {
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
color: "#4f8bff",
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
color: function (params)
{
var colorList = ['#FF9966', '#66B3FF', '#99FF99','#FFCC66','#FF6699','#CCCCCC'];
return colorList[params.dataIndex]
},
},
},
},
@ -900,956 +905,3 @@ export const lossFollowEcharts = {
],
};
// 患者信息 - 数据分析
export const HZXXSJFX = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"个";
}
return res1;
},
},
xAxis: {
type: "category",
data: ["性别"],
},
grid: {
top: "12%",
left: "5%",
right: "2%",
bottom: "0%",
containLabel: true,
},
yAxis: {
name: "数量( 个 )",
type: "value",
minInterval: 1,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
series: [
{
name: "男",
data: [20, 20, 50, 80, 70, 11, 15],
type: "bar",
barMaxWidth: 24, //柱图宽度
color: "#4f8bff",
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
},
{
name: "女",
data: [120, 200, 150, 80, 70, 110, 10],
type: "bar",
barMaxWidth: 24, //柱图宽度
color: "#ffcd6c",
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
},
],
};
// - - - - - - - - 静脉溶栓统计
export const JMRSL = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"%";
}
return res1;
},
},
grid: {
top: "12%",
left: "5%",
right: "3%",
bottom: "0%",
containLabel: true,
},
xAxis: {
type: "category",
data: [
"2023-01",
"2023-02",
"2023-03",
"2023-04",
"2023-05",
"2023-06",
"2023-07",
"2023-08",
"2023-09",
"2023-10",
"2023-11",
"2023-12",
],
},
yAxis: {
name: "单位( % ) ",
type: "value",
minInterval: 1,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
graphicObj: {
left: 0,
},
},
series: [
{
color: "#A794FE",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
name: "静脉溶栓率",
barMaxWidth: 24, //柱图宽度
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
},
],
};
// 静脉溶栓率 - 数据对比
export const JMSJDB = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"个";
}
return res1;
},
},
grid: {
top: "12%",
left: "5%",
right: "3%",
bottom: "0%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: [
"2023-01",
"2023-02",
"2023-03",
"2023-04",
"2023-05",
"2023-06",
"2023-07",
"2023-08",
"2023-09",
"2023-10",
"2023-11",
"2023-12",
],
boundaryGap: false,
},
],
yAxis: {
graphicObj: {
left: 0,
},
name: "单位( 个 )",
type: "value",
minInterval: 1,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
series: [
{
name: "静脉溶栓人数",
type: "line",
// stack: "Total",
color: "#00CE9F",
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00CE9F",
},
{
offset: 1,
color: "rgba(0,209,161,0.8)",
},
]),
},
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "急救特征人数",
type: "line",
// stack: "Total",
color: "#538BF6",
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#538BF6",
},
{
offset: 1,
color: "#538BF6",
},
]),
},
emphasis: {
focus: "series",
},
data: [120, 112, 91, 234, 222, 89, 100],
},
],
};
// 静脉溶栓率 - DNT
export const DNT = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"个";
}
return res1;
},
},
xAxis: {
type: "category",
data: [
"2023-01",
"2023-02",
"2023-03",
"2023-04",
"2023-05",
"2023-06",
"2023-07",
"2023-08",
"2023-09",
"2023-10",
"2023-11",
"2023-12",
],
},
grid: {
top: "12%",
left: "5%",
right: "3%",
bottom: "0%",
containLabel: true,
},
yAxis: {
name: "单位( 个 )",
type: "value",
minInterval: 1,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
series: [
{
color: "#FFCD6C",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
barMaxWidth: 24, //柱图宽度
name: "≤45 min",
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
},
{
color: "#F97186",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
name: "≤60 min",
barMaxWidth: 24, //柱图宽度
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
},
{
color: "#4f8bff",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
name: ">60 min",
barMaxWidth: 24, //柱图宽度
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
},
],
};
// 静脉溶栓率 - SICH
export const SICH = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"%";
}
return res1;
},
},
grid: {
top: "12%",
left: "5%",
right: "3%",
bottom: "0%",
containLabel: true,
},
ttooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "line", // 默认为直线，可选为：'line' | 'shadow'
},
},
xAxis: [
{
boundaryGap: false,
type: "category",
data: [
"2023-01",
"2023-02",
"2023-03",
"2023-04",
"2023-05",
"2023-06",
"2023-07",
"2023-08",
"2023-09",
"2023-10",
"2023-11",
"2023-12",
],
},
],
yAxis: {
scale: true,
type: "value",
minInterval: 1,
min: 0,
name: "单位( % )",
position: "left",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
axisLabel: {
show: true,
interval: 0,
},
},
series: [
{
name: "sICH发生率",
type: "line",
stack: "Total",
color: "#F97186",
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#FA7F90",
},
{
offset: 1,
color: "#F3D7DE",
},
]),
},
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 124, 120, 100],
},
],
};
// - - - - - - - - 血管治疗
export const XGZL = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"%";
}
return res1;
},
},
xAxis: {
type: "category",
data: [
"2023-01",
"2023-02",
"2023-03",
"2023-04",
"2023-05",
"2023-06",
"2023-07",
"2023-08",
"2023-09",
"2023-10",
"2023-11",
"2023-12",
],
},
grid: {
top: "12%",
left: "5%",
right: "3%",
bottom: "0%",
containLabel: true,
},
yAxis: {
name: "单位( % )",
type: "value",
minInterval: 1,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
series: [
{
name: "血管内治疗率",
color: "#4F8BFF",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
barMaxWidth: 24, //柱图宽度
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
},
],
};
// 数据对比
export const XGSJDB = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"个";
}
return res1;
},
},
grid: {
top: "12%",
left: "5%",
right: "3%",
bottom: "0%",
containLabel: true,
},
ttooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "line", // 默认为直线，可选为：'line' | 'shadow'
},
},
xAxis: [
{
type: "category",
data: [
"2023-01",
"2023-02",
"2023-03",
"2023-04",
"2023-05",
"2023-06",
"2023-07",
"2023-08",
"2023-09",
"2023-10",
"2023-11",
"2023-12",
],
boundaryGap: false,
},
],
yAxis: {
scale: true,
type: "value",
minInterval: 1,
name: "单位( 个 )",
position: "left",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
axisLabel: {
show: true,
interval: 0,
},
},
series: [
{
name: "桥接治疗人数",
type: "line",
// stack: "Total",
color: "#00CE9F",
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00CE9F",
},
{
offset: 1,
color: "#fff",
},
]),
},
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "非桥接治疗人数",
type: "line",
// stack: "Total",
color: "#538BF6",
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#538BF6",
},
{
offset: 1,
color: "#fff",
},
]),
},
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290, 330, 310],
},
],
};
// DPT
export const DPT = {
grid: {
top: "12%",
left: "5%",
right: "3%",
bottom: "0%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "line", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"个";
}
return res1;
},
},
xAxis: [
{
type: "category",
data: [
"2023-01",
"2023-02",
"2023-03",
"2023-04",
"2023-05",
"2023-06",
"2023-07",
"2023-08",
"2023-09",
"2023-10",
"2023-11",
"2023-12",
],
boundaryGap: false,
},
],
yAxis: {
scale: true,
type: "value",
minInterval: 1,
name: "单位( 个 )",
position: "left",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
axisLabel: {
show: true,
interval: 0,
},
},
series: [
{
name: "≤60 min",
type: "line",
// stack: "Total",
color: "#00D1A1",
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00D1A1",
},
{
offset: 1,
color: "#E5F5E8",
},
]),
},
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "≤90 min",
type: "line",
// stack: "Total",
color: "#FFCD6C ",
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#FFCD6C ",
},
{
offset: 1,
color: "#FDEBC8",
},
]),
},
emphasis: {
focus: "series",
},
data: [20, 32, 10, 34, 90, 30, 21],
},
{
name: ">90 min",
type: "line",
// stack: "Total",
color: "#A794FE",
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#A794FE",
},
{
offset: 1,
color: "#A794FE",
},
]),
},
emphasis: {
focus: "series",
},
data: [20, 32, 10, 34, 90, 30, 21],
},
],
};
//RPT
export const RPT = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"个";
}
return res1;
},
},
legend: {
type: "scroll",
padding: [0, 350, 0, 0],
data: ["急救详情", "本院SOP"],
},
grid: {
top: "12%",
left: "5%",
right: "3%",
bottom: "0%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: [
"2023-01",
"2023-02",
"2023-03",
"2023-04",
"2023-05",
"2023-06",
"2023-07",
"2023-08",
"2023-09",
"2023-10",
"2023-11",
"2023-12",
],
boundaryGap: false,
},
],
yAxis: {
name: "单位( 个 )",
scale: true,
type: "value",
minInterval: 1,
position: "left",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
axisLabel: {
show: true,
interval: 0,
},
},
series: [
{
name: "≤60",
type: "line",
// stack: "Total",
color: "#A794FE",
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#A794FE",
},
{
offset: 1,
color: "#EAE5FE",
},
]),
},
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "≤90",
type: "line",
// stack: "Total",
color: "#4F8BFF",
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4F8BFF",
},
{
offset: 1,
color: "#E9F1FF",
},
]),
},
emphasis: {
focus: "series",
},
data: [22, 82, 19, 34, 29, 33, 31],
},
{
name: ">90",
type: "line",
// stack: "Total",
color: "#ffcd6c",
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#ffcd6c",
},
{
offset: 1,
color: "rgba(255,205,108,0.8)",
},
]),
},
emphasis: {
focus: "series",
},
data: [22, 82, 19, 34, 29, 33, 31],
},
],
};

Write Preview
Loading…
Cancel
Save