ECHARTS四象限图加图例 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
        <title></title>
    </head>
    <body>
        <div id="main" style="width:100%;height:500px;"></div>
    </body>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var xiaoLv2_color = ['#CC9999','#8BBA00','#FF8E46','#90CECE','#DB5D5D','#AFD8F8','#FDC689','#6DCFF6','#C0B73F','#CC99FF']
        var xiaoLv2_name = ['a','b','c','d','f']
        var xiaoLv2_value = [[0.2,0.3],[1.2,0.5],[1.4,0.5],[1.5,1.5]]
        var xiaoLv2_option=null;
        var o_data = [{
                type: 'scatter',
                markLine: {
                    label: {
                        normal: {
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: "#666",
                            type: 'solid',
                            width: 0.5,
                        },
                    },
                    data: [{
                        label:{
                            show:false
                        },
                        xAxis:1,
                        name: '单店年度平均费用',
                        itemStyle: {
                            normal: {
                                color: "#000",
                            }
                        }
                    }, {
                        label:{
                            show:false
                        },
                        yAxis: 1,
                        name: '单店年度平均费用',
                        itemStyle: {
                            normal: {
                                color: "#b84a58",
                            }
                        }
                    }]
                },
                markArea: {
                    silent: true,
                    data: [
                        [{
                            name: 'Ⅳ',
                            itemStyle: {
                                normal: {
                                    color: '#fff'
                                },
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideBottomRight',
                                    fontStyle: 'normal',
                                    backgroundColor:'#ccc',
                                    color: "#8BBA00",
                                    fontSize: 20,
                                }
                            },
                            coord: [1,0],
                        }, {
                            coord: [2, 0],
                        }],
                        [{
                            name: 'Ⅲ',
                            itemStyle: {
                                normal: {
                                    color: 'transparent',
                                },
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideBottomLeft',
                                    fontStyle: 'normal',
                                    backgroundColor:'#ccc',
                                    color: "#8BBA00",
                                    fontSize: 20,
                                }
                            },
                            coord: [0, 0],
                        }, {
                            coord: [1,0],
                        }],
                        [{
                            name: 'Ⅰ',
                            itemStyle: {
                                normal: {
                                    color: 'transparent',
        
                                },
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideTopRight',
                                    backgroundColor:'#ccc',
                                    fontStyle: 'normal',
                                    color: "#000",
                                    fontSize: 20,
                                }
                            },
                            coord: [1,1],
                        }, {
                            coord: [2,1],
                        }],
                        [{
                            name: 'Ⅱ',
                            itemStyle: {
                                normal: {
                                    color: 'transparent',
                                },
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideTopLeft',
                                    fontStyle: 'normal',
                                    backgroundColor:'#ccc',
                                    color: "#000",
                                    fontSize: 20,
                                }
                            },
                            coord: [0,1],
                        }, {
                            coord: [1,1],
                        }],
                    ]
                }
            }]
            for(var i=0;i<xiaoLv2_name.length;i++){
                    o_data.push({
                        type: 'scatter',
                        name: xiaoLv2_name[i],
                        data: [xiaoLv2_value[i]],
                        symbolSize: 10,
                        color: xiaoLv2_color[i]
                    })
                }
                console.log("156",xiaoLv2_name)
                xiaoLv2_option = {
                        legend: {
                            data: xiaoLv2_name,
                            show:false
                        },
                        title:{
                            text:'',
                            textStyle:{
                                fontSize:10
                            },
                            top:90,
                            left:-5
                        },
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                show: true,
                                type: 'cross',
                                lineStyle: {
                                    type: 'dashed',
                                    width: 1
                                },
                            },
                            formatter: function(obj) {
                                if (obj.seriesType == "scatter") {
                                    return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
                                        obj.seriesName+
                                        '</div>' +
                                        '<span>' +
                                        '费用消耗指数' +
                                        '</span>' +
                                        ' : ' + obj.data[0] +
                                        '<br/>' +
                                        '<span>' +
                                        '时间消耗指数' +
                                        '</span>' +
                                        ' : ' + obj.data[1]
                                }
                                return ''
                            }
                        },
                        grid:{
                            top:'10%',
                            right:'10%',
                            left: '10%',
                            show: true,
                            borderColor: '#666',
                            backgroundColor: '#ffffff'
                        },
                        xAxis: {
                            name: '费用消耗指数',
                            type: 'value',
                            scale: true,
                            max: '1.9',
                            min: '0',
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#8BBA00'
                                }
                            },
                            axisTick:{
                                inside:true,
                            },
                            nameTextStyle:{
                                verticalAlign:'bottom',
                                padding:[-100,220,175,-0],
                                fontSize:14
                            }
                        },
                        yAxis: {
                            name: '单店年度平均费用',
                            type: 'value',
                            scale: true,
                            max: '1.8',
                            min: '0',
                            axisTick:{
                                inside:true,
                            },
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#8BBA00'
                                }
                            },
                            nameTextStyle:{
                                padding:[10,-1200,0,0],
                                fontSize:14
                            }
                        },
                        series: o_data
                    };
        // var option;
        // option = {
        //   xAxis: {
        //     type: 'category',
        //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        //   },
        //   yAxis: {
        //     type: 'value'
        //   },
        //   series: [
        //     {
        //       data: [150, 230, 224, 218, 135, 147, 260],
        //       type: 'line'
        //     }
        //   ]
        // };
        
        xiaoLv2_option && myChart.setOption(xiaoLv2_option);
    </script>
</html>

来源:https://www.freesion.com/article/9401901646/

posted @ 2021-11-15 08:58  小小强学习网  阅读(738)  评论(0)    收藏  举报