如图:
import _ from "lodash"
valdata的数据我未展示,数据格式为:valdata = [
{aaa:111},{bbb:222},{ccc:333},{ddd:444},{eee:555},{fff:666}
]
getCaseNumberPic = (valData) => {
var _this = this
const xAxis = []
valData.forEach(function (obj) {
xAxis.push(obj.monthText)
})
const newHigh = []
const dataRealHigh1 = []
const dataRealHigh2 = []
const newLow = []
const dataRealLow1 = []
const dataRealLow2 = []
const newNormal = []
const dataRealNormal1 = []
const dataRealNormal2 = []
valData.forEach(function (item) {
if (item.isCalculate == 0) {
dataRealHigh1.push({ value: item.highNum, total: item.inBaNum, isCalculate: item.isCalculate })
dataRealLow1.push({ value: item.lowNum, total: item.inBaNum, isCalculate: item.isCalculate })
dataRealNormal1.push({ value: item.normalNum, total: item.inBaNum, isCalculate: item.isCalculate })
} else {
dataRealHigh2.push({ value: item.highNum, total: item.inBaNum, isCalculate: item.isCalculate })
dataRealLow2.push({ value: item.lowNum, total: item.inBaNum, isCalculate: item.isCalculate })
dataRealNormal2.push({ value: item.normalNum, total: item.inBaNum, isCalculate: item.isCalculate })
}
})
if (valData.length > 0) {
const numAll = _.countBy(valData, function (num) {
return num.isCalculate == 0 ? 'realNum' : 'foreNum';
});
const blankData = new Array(numAll.realNum - 1).fill({ value: '', total: "", isCalculate: 0 })
const zeroData = new Array(1).fill({ value: 0, total: 0, isCalculate: 0 })
newHigh.push(...blankData, ...zeroData, ...dataRealHigh2)
newLow.push(...blankData, ...zeroData, ...dataRealLow2)
newNormal.push(...blankData, ...zeroData, ...dataRealNormal2)
}
var option = {
tooltip: {
trigger: 'axis',
textStyle: {
color: 'rgba(0,0,0,0.65)',
fontSize: 12,
fontWeight: 'normal'
},
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (param) {
var newData = []
param.forEach(function (obj) {
if (obj.data.value != '') {
newData.push(obj)
}
})
if (newData.length > 0) {
var newTip = ""
for (var i = 0; i < newData.length; i++) {
newTip = newTip + newData[i].marker + newData[i].seriesName + ":" + newData[i].data.value + "个" + "<br/>";
}
return newData[0].name + "总病例:" + "<br/>" + newData[0].data.total + "个" + "<br/>" + newTip
}
}
},
legend: {
bottom: 12,
left: 0,
textStyle: {//文字颜色
fontSize: 12,
color: 'rgba(0,0,0,0.65)'
},
selectedMode: false,
itemWidth: 18,
itemHeight: 6,
itemGap: 16,
data: ['高倍率', '低倍率', '正常倍率'],
},
grid: {
x: 16, //左
y: 30, //上
x2: 24, //右
y2: 45, //下
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis,
axisLabel: {
interval: 'auto',
show: true,
textStyle: {
color: 'rgba(0,0,0,0.45)', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
color: '#d9d9d9' //更改坐标轴颜色
},
onZero: false
}
},
yAxis: {
type: 'value',
name: '病案数(个)',
nameTextStyle: {
color: 'rgba(0,0,0,0.45)',
fontSize: 12,
padding: [0, 0, 0, 50]
},
splitLine: {
show: true,
lineStyle: {
color: ['#e8e8e8'],
width: 1,
type: 'dashed'
}
},
axisLabel: {
textStyle: {
align: 'right',
fontSize: 12 // 文字右对齐
},
color: "rgba(0,0,0,0.45)",
}
},
series: [
{
name: '高倍率',
data: dataRealHigh1,
type: 'line',
z: 999999,
stack: '总量',
smooth: false,
symbol: 'emptyCircle',
showSymbol: true,
itemStyle: {
normal: {
label: {
show: false // 顶端内容显示
},
color: "#4145d9",
lineStyle: {
color: "#4145d9"
}
}
},
areaStyle: {
normal: {
origin: 'start',
color: '#4145d9',
}
}
},
{
name: '高倍率',
type: 'line',
stack: '总量',
smooth: false,
symbol: 'emptyCircle',
itemStyle: {
normal: {
label: {
show: false // 顶端内容显示
},
color: "#4145d9",
lineStyle: {
width: 2,
color: '#4145d9',
type: 'dashed'
}
}
},
areaStyle: {
normal: {
origin: 'start',
color: '#fff'
}
},
data: newHigh,
},
{
data: dataRealLow1,
name: '低倍率',
type: 'line',
stack: '总量',
z: 999999,
smooth: false,
symbol: 'emptyCircle',
showSymbol: true,
itemStyle: {
normal: {
label: {
show: false // 顶端内容显示
},
color: "#bfc1ff",
lineStyle: {
color: "#bfc1ff"
}
}
},
areaStyle: {
normal: {
origin: 'start',
color: '#bfc1ff'
}
}
},
{
name: '低倍率',
type: 'line',
stack: '总量',
smooth: false,
symbol: 'emptyCircle',
itemStyle: {
normal: {
label: {
show: false // 顶端内容显示
},
color: "#bfc1ff",
lineStyle: {
width: 2,
color: '#bfc1ff',
type: 'dashed'
}
}
},
areaStyle: {
normal: {
origin: 'start',
color: '#fff'
}
},
data: newLow,
},
{
data: dataRealNormal1,
name: '正常倍率',
type: 'line',
stack: '总量',
z: 999999,
smooth: false,
symbol: 'emptyCircle',
showSymbol: true,
itemStyle: {
normal: {
label: {
show: false // 顶端内容显示
},
color: "#8c8fff",
lineStyle: {
color: "#8c8fff"
}
}
},
areaStyle: {
normal: {
origin: 'start',
color: '#8c8fff'
}
}
},
{
name: '正常倍率',
type: 'line',
stack: '总量',
smooth: false,
symbol: 'emptyCircle',
itemStyle: {
normal: {
label: {
show: false // 顶端内容显示
},
color: "#8c8fff",
lineStyle: {
width: 2,
color: '#8c8fff',
type: 'dashed'
}
}
},
areaStyle: {
normal: {
origin: 'start',
color: '#fff'
}
},
data: newNormal,
},
],
};
var caseNumberPic = echarts.init(document.getElementById('caseNumberPic'));
caseNumberPic.clear()
caseNumberPic.setOption(option);
window.addEventListener("resize", function () {
caseNumberPic.resize();
});
}
柱状图效果展示:
getHostpitalTredPic = (valData) => {
const xAxis = [];
valData.forEach(function (obj) {
xAxis.push(obj.monthText)
})
const newProfitFee = []
const dataRealProfitFee1 = []
const dataRealProfitFee2 = []
valData.forEach(function (item) {
if (item.isCalculate == 0) {
dataRealProfitFee1.push({ value: item.profitFeeTotal, isCalculate: item.isCalculate })
} else {
dataRealProfitFee2.push({ value: item.profitFeeTotal, isCalculate: item.isCalculate })
}
})
if (valData.length > 0) {
const numAll = _.countBy(valData, function (num) {
return num.isCalculate == 0 ? 'realNum' : 'foreNum';
});
const blankData = new Array(numAll.realNum).fill({ value: '', isCalculate: 0 })
newProfitFee.push(...blankData, ...dataRealProfitFee2)
}
var option = {
tooltip: {
trigger: 'axis',
textStyle: {
color: 'rgba(0,0,0,0.65)',
fontSize: 12,
fontWeight: 'normal'
},
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (param) {
var newData = []
param.forEach(function (obj) {
if (obj.data != '') {
newData.push(obj)
}
})
if (newData.length > 0) {
var newTip = ""
for (var i = 0; i < newData.length; i++) {
if (newData[i].borderColor == undefined) {
if (newData[i].value >= 0) {
newTip = newTip + newData[i].marker + '结余' + ":" + newData[i].value + '元' + "<br/>";
} else {
newTip = newTip + newData[i].marker + '超支' + ":" + newData[i].value + '元' + "<br/>";
}
} else {
if (newData[i].value >= 0) {
let iconSty = `<span style=display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background:#5bdfd7></span>`
newTip = newTip + iconSty + '结余' + ":" + newData[i].value + '元' + "<br/>";
} else {
let iconSty = `<span style=display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background:#31c4f5></span>`
newTip = newTip + iconSty + '超支' + ":" + newData[i].value + '元' + "<br/>";
}
}
return newData[0].name + ":" + "<br/>" + newTip
}
}
}
},
legend: {
bottom: 12,
left: 0,
icon: 'square',
textStyle: {//文字颜色
fontSize: 12,
color: 'rgba(0,0,0,0.65)'
},
itemWidth: 10,
itemHeight: 10,
itemGap: 16,
selectedMode: false
},
grid: {
x: 16, //左
y: 30, //上
x2: 24, //右
y2: 45, //下
containLabel: true,
},
xAxis: {
type: 'category',
// boundaryGap: false,
data: xAxis,
axisLabel: {
interval: 'auto',
show: true,
textStyle: {
color: 'rgba(0,0,0,0.45)', //更改坐标轴文字颜色
fontSize: 12 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
color: '#d9d9d9' //更改坐标轴颜色
},
onZero: false
}
},
yAxis: {
name: '金额(元)',
type: 'value',
nameTextStyle: {
color: 'rgba(0,0,0,0.45)',
fontSize: 12,
padding: [0, 0, 0, 30]
},
splitLine: {
show: true,
lineStyle: {
color: ['#e8e8e8'],
width: 1,
type: 'dashed'
}
},
axisLabel: {
textStyle: {
align: 'right',
fontSize: 12 // 文字右对齐
},
color: "rgba(0,0,0,0.45)",
}
},
series: [
{
name: '结余',
color: '#5bdfd7',
data: dataRealProfitFee1,
type: 'bar',
barWidth: 12,
z: 999999,
stack: '总量',
itemStyle: {
normal: {
label: {
show: false // 顶端内容显示
},
color: function (param) {
if (param.value >= 0) {
return "#5bdfd7"
} else {
return "#31c4f5"
}
},
}
},
},
{
name: '超支',
color: '#31c4f5',
type: 'bar',
barWidth: 12,
stack: '总量',
data: newProfitFee.map(item => {
return {
value: item.value,
itemStyle: {
normal: {
// label: {
// show: false // 顶端内容显示
// },
borderColor: item.value >= 0 ? '#5bdfd7' : '#31c4f5',
borderType: 'dashed',
color: 'transparent'
}
},
}
})
},
],
};
var hostpitalTredPic = echarts.init(document.getElementById('hostpitalTredPic'));
hostpitalTredPic.clear()
hostpitalTredPic.setOption(option);
window.addEventListener("resize", function () {
hostpitalTredPic.resize();
});
}