
<template>
<div>
<Icon type="ios-add-circle-outline" @click="showName" style="font-size: 22px;float:right;margin-top: 4px;margin-right: 26px;cursor: pointer;position:relative;z-index:9999"/>
<div ref="cmijysdt" :style="style" style="position:relative;z-index:9998"></div>
</div>
</template>
<script>
export default {
data(){
return {
params:{},
seriesData:[],
xmin:0,
scrollerHeight: document.body.clientHeight - 170 + "px",
style: {
width:'100%',
height:document.body.clientHeight - 220 + 'px',
},
stateWord:false,
}
},
methods:{
showName(){
if(this.stateWord ==true){
for(let i=0;i<this.seriesData.length;i++){
this.seriesData[i].label.normal.show=false
}
this.stateWord=false
this.initCharts();
}else{
for(let i=0;i<this.seriesData.length;i++){
this.seriesData[i].label.normal.show=true
}
this.stateWord=true
this.initCharts();
}
},
reset(){
this.seriesData=[];
},
init(title,dataArr){
this.reset();
this.search(title,dataArr);
},
search(title,dataArr){
this.xmin=1;
//deptblsnum
dataArr.forEach(item => {
let obj=[item.x,item.y];
let val = { name: item.name, value: obj,num:item.deptblsnum };
this.seriesData.push(val);
});
this.seriesData = this.seriesData.map(d => ({
...d,
name: d.name,
itemStyle: {
//设置空心圆
color:'rgba(0,0,0,0)',
borderWidth:2,
borderColor: this.getAreaPointColor(d.value)
},
label: {
normal: {show: this.stateWord, position: 'top', formatter: '{b}'}
}
}));
this.initCharts();
},
getAreaPointColor (value) {
let [x, y] = value
if(x >= this.xmin && y >= 0){
return '#32CD32'
}else if(x < this.xmin && y >= 0){
return '#3583FF'
}else if(x < this.xmin && y < 0){
return '#FF0000'
}else if(x >= this.xmin && y < 0){
return '#FF7F24'
}
},
initCharts(){
let that=this;
let chartDom = this.$refs.cmijysdt;
let myChart = this.$echarts.init(chartDom);
let option;
option = {
toolbox: {
feature: {
saveAsImage: {},
},
},
tooltip: {
position: "top",
// formatter: "科室名称: {b}<br />" + "数值" + ": {c}",
formatter:function(params){
let deptname=params.data.name;
let bls=params.data.num;
let zb=params.data.value;
return "科室名称: "+deptname+"<br />" + "数值" + ": "+zb+"<br />"+"病例数: "+bls;
}
},
xAxis: {
name:"CMI",
type:'value',
scale: true,
min: 0,
// function (value) {
// if (Math.abs(value.min) > Math.abs(value.max)) {
// return Math.floor(-Math.abs(value.min));
// } else {
// return Math.floor(-value.max);
// }
// },
max:function (value) {
if (Math.abs(value.min) > Math.abs(value.max)) {
return Math.ceil((that.xmin-(Math.floor(-Math.abs(value.min))))-(Math.ceil(Math.abs(value.min))-that.xmin)+Math.abs(value.min))
;
} else {
return Math.ceil((that.xmin-(Math.floor(-value.max)))-(Math.ceil(value.max)-that.xmin)+value.max)
;
}
},
},
yAxis: {
name:"次均结余",
type:'value',
nameLocation: 'middle',
nameGap: '45',
min: function (value) {
if (Math.abs(value.min) > Math.abs(value.max)) {
return Math.floor(-Math.abs(value.min));
} else {
return Math.floor(-value.max);
}
},
max: function (value) {
if (Math.abs(value.min) > Math.abs(value.max)) {
return Math.ceil(Math.abs(value.min));
} else {
return Math.ceil(value.max);
}
},
axisLine: {
lineStyle: {
color: '#E8E8E8', // 设置坐标轴颜色
}
},
axisLabel:{
color:'#000',
},
nameTextStyle:{
color:'#000',
}
},
dataZoom: [
{
//滚动条
bottom: 10,
id: "dataZoomX",
type: "slider",
xAxisIndex: [0],
filterMode: "filter",
start: 0,
end: 100,
},
{
//滚动条
left: 0,
id: "dataZoomY",
type: "slider",
yAxisIndex: [0],
filterMode: "filter",
start: 0,
end: 100,
},
],
series: [
{
// symbolSize: 20,
data: this.seriesData,
type: 'scatter',
markLine: {
label:{
show:true,
position:'insideStartTop',
distance:-20
},
symbol:[],
lineStyle: {
color: '#000',
type: "solid"
},
data: [
{
xAxis: this.xmin
}
]
},
symbolSize: function (data,params) {
// 根据数据项的值来设置大小
return params.data.num/15; // 假设数据项的格式是 [x, y, value]
},
}
]
};
option && myChart.setOption(option);
}
}
}
</script>
<style scoped>
</style>
478

被折叠的 条评论
为什么被折叠?



