二维点阵图echarts scatter配置项内容和展示

二维点阵图

      option = {
    title: {
        show: false,
        text: '',
        x: 16,
        y: 20,
        textStyle: {
            fontSize: 14,
            fontWeight: 'bold',
            color: '#38394C'
        }
    },
    dataZoom: [
        // {
        //   type: 'slider',
        //   show: true,
        //   xAxisIndex: [0],
        //   start: 0,
        //   end: 100
        // },
        // {
        //   type: 'slider',
        //   show: true,
        //   yAxisIndex: [0],
        //   left: '93%',
        //   start: 0,
        //   end: 100
        // },
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 0,
            end: 100
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 0,
            end: 100
        }
    ],
    grid: {
        top: 30,
        right: '6%',
        left: '8%',
        bottom: '10%'
    },
    tooltip: {
        trigger: 'item',
        formatter(params) {
            return `'x轴'：10%</br> y轴：20%`;
        },
        padding: 4
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    legend: {
        x: 'center',
        y: 'bottom',
        data: ['数量']
    },
    xAxis: {
        name: 'x\n轴\n完\n成\n率',
        nameTextStyle: {
            color: '#38394C',
            padding: [0, 0, -30, -10],
            fontSize: 14
        },
        nameLocation: 'end',
        splitNumber: 3,
        interval: 50,
        max: 150,
        axisLine: {
            lineStyle: {
                color: '#D1D4E2'
            }
        },
        axisLabel: {
            color: '#38394C',
            showMaxLabel: false,
            showMinLabel: false,
            formatter: '{value}%',
            fontSize: 14
        },
        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: ['#D1D4E2', '#D1D4E2', '#D1D4E2', '#FFFFFF']
            }
        }
    },
    yAxis: {
        name: 'y\n轴\n完\n成\n率',
        nameLocation: 'end',
        nameTextStyle: {
            color: '#38394C',
            padding: [0, 30, -56, 0],
            fontSize: 14
        },
        splitNumber: 3,
        interval: 50,
        max: 100,
        min: 0,
        axisLine: {
            lineStyle: {
                color: '#D1D4E2'
            }
        },
        axisLabel: {
            color: '#38394C',
            showMaxLabel: false,
            showMinLabel: false,
            formatter: '{value}%',
            fontSize:14
        },
        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: ['#D1D4E2', '#D1D4E2', '#D1D4E2', '#D1D4E2', '#FFFFFF']
            }
        }
    },
    series: [{
        symbolSize: 22,
        markPoint: {
            symbol: 'roundRect',
            symbolSize: 12
        },
        markArea: { // 标记区域
            silent: true,
            itemStyle: { // 全局的
                normal: {
                    color: '#FEFBF3'
                }
            },
            data: [
                [{
                        yAxis: '-50', // y轴坐标控制
                        xAxis: '0',
                        itemStyle: {
                            color: '#ff9797',
                            opacity: 0.1
                        }
                    },
                    {
                        yAxis: '0',
                        xAxis: '150'
                    }
                ],
                [{
                        yAxis: '0', // y轴坐标控制
                        xAxis: '0',
                        itemStyle: {
                            color: '#ff9797',
                            opacity: 0.1
                        }
                    },
                    {
                        yAxis: '50',
                        xAxis: '50'
                    }
                ],
                [{
                    yAxis: '0',
                    xAxis: '50',
                    itemStyle: {
                        color: '#f0d374',
                        opacity: 0.1
                    }
                }, {
                    yAxis: '50',
                    xAxis: '150'
                }],
                [{
                    yAxis: '50',
                    xAxis: '0',
                    itemStyle: {
                        color: '#f0d374',
                        opacity: 0.1
                    }
                }, {
                    yAxis: '100',
                    xAxis: '100'
                }],
                [{
                    yAxis: '50',
                    xAxis: '100',
                    itemStyle: {
                        color: '#5dcbe3',
                        opacity: 0.1
                    }
                }, {
                    yAxis: '100',
                    xAxis: '150'
                }]
            ]
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     formatter(param) {
        //       console.log(param);
        //       return param.data[3];
        //     },
        //     padding: 10,
        //     backgroundColor: 'rgba(0, 0, 0, 0.5)',
        //     position: 'right'
        //   }
        // },
        data: [
            [28, 16, '数据1'],
            [73, 36, '数据2'],
            [78, 96, '数据3'],
            [103, 96, '数据4'],
            [128, 96, '数据5'],
            [128, 89, '数据6'],
            [36, 89, '数据7'],
            [126, 29, '数据8']
        ],
        type: 'scatter',
        itemStyle: {
            normal: {
                color(params) {
                    var colorList = [
                        ['#ECB4CD', '#D57D9E'], // 红色
                        ['#F6D9A0', '#E9B267'], // 黄色
                        ['#89D8E3', '#51B0C3'] // 蓝色
                    ];
                    var index = 1;
                    // 数据坐标轴x params.data[0] 数据坐标轴y params.data[1]
                    var params_X = params.data[0];
                    var params_y = params.data[1];
                    if (params_X >= 0 && params_y <= 0) {
                        index = 0;
                    } else if (params_X >= 0 && params_X < 50 && params_y > 0 && params_y <= 50) {
                        index = 0;
                    } else if (params_X >= 0 && params_X < 100 && params_y > 50) {
                        index = 1;
                    } else if (params_X >= 100 && params_y > 0 && params_y <= 50) {
                        index = 1;
                    } else if (params_X >= 100 && params_y > 50) {
                        index = 2;
                    }
                    return new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                                offset: 0,
                                color: colorList[index][0]
                            },
                            {
                                offset: 1,
                                color: colorList[index][1]
                            }
                        ]);
                },
                label: {
                    color: '#38394C',
                    show: true,
                    padding: [0, 0, 0, -4.6],
                    fontSize: 10,
                    position: 'right',
                    verticalAlign: 'middle',
                    // rotate: 90,
                    formatter(params) {
                        return `${params.data[2]}`;
                    }
                    // backgroundColor: '#dcdcdc',
                    // padding: [6, 10, 6, 10]
                }
            }
        }
    }]
};