关于echarts3.0散点图的一点封装

/**
 * 散点图
 * @param obj
 * @param data
 */
function getScatterMap(obj,data){
    var datamen = "";
    $.each(data.men,function(key,value){
        datamen = datamen + "["+key+","+value+"],";
    });
    var datawomen = "";
    $.each(data.women,function(key,value){
        datawomen = datawomen + "["+key+","+value+"],";
    });
    var option = {
            title : {
                text: '男性女性身高体重分布',
                subtext: '抽样调查来自: Heinz  2003'
            },
            grid: {
                left: '3%',
                right: '7%',
                bottom: '3%',
                containLabel: true
            },
            tooltip : {
                trigger: 'axis',
                showDelay : 0,
                formatter : function (params) {
                    if (params.value.length > 1) {
                        return params.seriesName + ' :<br/>'
                           + params.value[0] + 'cm '
                           + params.value[1] + 'kg ';
                    }
                    else {
                        return params.seriesName + ' :<br/>'
                           + params.name + ' : '
                           + params.value + 'kg ';
                    }
                },
                axisPointer:{
                    show: true,
                    type : 'cross',
                    lineStyle: {
                        type : 'dashed',
                        width : 1
                    }
                }
            },
            toolbox: {
                feature: {
                    dataZoom: {},
                    brush: {
                        type: ['rect', 'polygon', 'clear']
                    }
                }
            },
            brush: {
            },
            legend: {
                data:eval(data.legend),
                left: 'center'
            },
            xAxis : [
                {
                    type : 'value',
                    scale:true,
                    axisLabel : {
                        formatter: '{value} cm'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    scale:true,
                    axisLabel : {
                        formatter: '{value} kg'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            series : [
                {
                    name:'女性',
                    type:'scatter',
                    data:eval("[" + datawomen + "]"),
                    markArea: {
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: 'transparent',
                                borderWidth: 1,
                                borderType: 'dashed'
                            }
                        },
                        data: [[{
                            name: '女性分布区间',
                            xAxis: 'min',
                            yAxis: 'min'
                        }, {
                            xAxis: 'max',
                            yAxis: 'max'
                        }]]
                    },
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        lineStyle: {
                            normal: {
                                type: 'solid'
                            }
                        },
                        data : [
                            {type : 'average', name: '平均值'},
                            { xAxis: 160 }
                        ]
                    }
                },
                {
                    name:'男性',
                    type:'scatter',
                    data: eval("[" + datamen + "]"),
                    markArea: {
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: 'transparent',
                                borderWidth: 1,
                                borderType: 'dashed'
                            }
                        },
                        data: [[{
                            name: '男性分布区间',
                            xAxis: 'min',
                            yAxis: 'min'
                        }, {
                            xAxis: 'max',
                            yAxis: 'max'
                        }]]
                    },
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        lineStyle: {
                            normal: {
                                type: 'solid'
                            }
                        },
                        data : [
                            {type : 'average', name: '平均值'},
                            { xAxis: 170 }
                        ]
                    }
                }
            ]
        };

    var myChart = echarts.init(document.getElementById(obj));

    myChart.setOption(option);
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值