Echart 饼状图,柱状图series.data数据动态设置

关于echart的饼状图的数据参数主要在option中设置,我们需要根据自己的要求来设置
legend.data ,series.data.
有时需要从数据库中取得数据然后设置。因此就涉及动态设置参数的问题。
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};

可以采用如下方式动态设置:声明两个数组taskname,seriesdata,由于series.data的元素为value,那么两个参数,因此将seriesdata的每个元素存为包含两个属性的对象即可option = {
title : {
text : '漏洞数量比较',
//subtext : '纯属虚构',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data :taskname
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'pie', 'funnel' ],
option : {
funnel : {
x : '25%',
width : '50%',
funnelAlign : 'left',
max : 1548
}
}
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
series : [ {
name : '访问来源',
type : 'pie',
radius : '55%',
center : [ '50%', '60%' ],
data : seriesdata
} ]
};
for(var i=0;i<dataList.length;i++)
{ var obj=new Object();
obj.name=dataList[i].taskName;
obj.value=dataList[i].vulcount;
seriesdata[i]=obj;
}
对于柱状图`function show_maliciousDegree() {
var chart2 = echarts.init(document.getElementById(‘maliciousDegree’));
chart2.clear();

var vuldangerlevelarr=[];
var seriesData=[];

 option = {
    title : {
        text : '恶意程度比较',

    },
    tooltip : {
        trigger : 'axis'
    },
    legend : {
        data : []
    },
    toolbox : {
        show : true,
        feature : {
            mark : {
                show : true
            },
            dataView : {
                show : true,
                readOnly : false
            },
            magicType : {
                show : true,
                type : [ 'line', 'bar' ]
            },
            restore : {
                show : true
            },
            saveAsImage : {
                show : true
            }
        }
    },
    calculable : true,
    xAxis : [ {
        type : 'category',
        data : []
    } ],
    yAxis : [ {
        type : 'value'
    } ],
    series : []
};



$.ajax ({
    url : "../../../GetVulData.action",
    type : "get",
    dataType:"json",
    async : false,
    data : {
        "taskNames" : taskNames, 
        "executeTimes" : executeTimes
    },
    success : function(data) {  
        //vuldangerlevelarr中是所有任务的危险程度
        vuldangerlevelarr=data.vuldangerlevelarr;
        var dataList2=data.dataList2;  
    //根据任务的多少对相应参数赋值,name为任务名称,data为此任务对应危险程度的数量信息
        for(var i=0;i<dataList2.length;i++)
         {
         seriesData.push({

             'name':dataList2[i].taskName,
             'type':'bar',
             'data':dataList2[i].vuldanlevelcount,
             markPoint : {
                    data : [ {
                        type : 'max',
                        name : '最大值'
                    }, {
                        type : 'min',
                        name : '最小值'
                    } ]
                },
                markLine : {
                    data : [ {
                        type : 'average',
                        name : '平均值'
                    } ]
                }
             });         
         }              
        },
        error : function() {
        }
});
option.legend.data=taskname;
option.xAxis[0]['data']=vuldangerlevelarr;
chart2.setOption(option, true);
chart2.setSeries(seriesData);

}`

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值