echarts的散点图的圈设置成空心圆

在这里插入图片描述

<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值