echarts散点图(象限图)设置不同的颜色

最新推荐文章于 2024-02-29 11:22:44 发布

aitengteng1

最新推荐文章于 2024-02-29 11:22:44 发布

阅读量1.2k

点赞数 10

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/aitengteng1/article/details/134641020

版权

如图所示：
在这里插入图片描述

<template>
    <div ref="sdtcmijy" :style="{height:scrollerHeight}"></div>
</template>
<script>
import {getXxt} from './../requestAPI.js'

export default {
    data(){
        return {
            params:{},
            seriesData:[],
            xmin:0,
            scrollerHeight: document.body.clientHeight - 170 + "px",
        }
    },
    methods:{
        reset(){
            this.seriesData=[];
        },
        init(params){
            this.reset();
            this.params=params;
            this.search();
        },  
        search(){
            getXxt(this.params).then(res=>{
                if(res.status===200){
                    let data=res.data.list.list;
                    this.xmin=res.data.xmin;
                    console.log(this.xmin)
                    if(data.length>0){
                        data.forEach(item => {
                            let obj=[item.fcmi,item.fybjy];
                            let val = { name: item.name, value: obj };
                            this.seriesData.push(val);
                        });
                        this.seriesData = this.seriesData.map(d => ({
                            ...d,
                            itemStyle: {
                               
                                color: this.getAreaPointColor(d.value)
                            }
                        }))
                       
                    }
                     this.initCharts();
                    
                }
            });
        },
        getAreaPointColor (value) {
            console.log(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.sdtcmijy;
            let myChart = this.$echarts.init(chartDom);
            let option;

            option = {
                toolbox: {
                feature: {
                    saveAsImage: {},
                },
                },
                tooltip: {
                    position: "top",
                    formatter: "名称: {b}<br />" + "数值" + ": {c}",
                    },
            xAxis: {
                name:"x轴",
                type:'value',
                scale: true,
                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((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:"y轴",
                type:'value',
                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: [
                {
                name: "名称",
                symbolSize: 20,
                data: this.seriesData,
                type: 'scatter',
                markLine: {
                    label:{
                        show:true,
                        position:'insideStartTop'
                    },
                    symbol:[],
                    lineStyle: {
                            color: '#000',
                            type: "solid" 
                        },
                data: [
                            {
                                
                                xAxis: this.xmin
                            }
                        ]
                }

                }
            ]
            };

            option && myChart.setOption(option);
        }
    }
}
</script>
<style scoped>

</style>