Echart 饼状图,柱状图series.data数据动态设置
来源:互联网 发布:辐射4阴影优化补丁 编辑:程序博客网 时间:2024/06/06 19:32
关于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 = {
对于柱状图`function show_maliciousDegree() {
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;
}
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);
}`
- Echart 饼状图,柱状图series.data数据动态设置
- echart series个数动态变化
- echart 柱状图 实现动态加载
- HighCharts趋势图动态设置Series数组(根据后台决定具体几个data), 并动态刷新数据
- Echart动态加载数据
- echart柱状图多地区数据加载字号
- echart 柱状图饼图调用后台数据
- echart读取数据库数据画柱状图
- highcharts 动态设置series
- echart如何设置饼图的颜色以及柱状图颜色
- 利用EChart 画柱状图
- echart-柱状图显示说明
- Echart动态获取数据库数据使用心得
- Echart ajax动态调取后台数据
- Highcharts柱状图动态数据展示
- FusionChart实现柱状图、饼状图的动态数据显示 附Demo
- 百度的echart环形图颜色动态设置
- 百度的echart环形图颜色动态设置
- Linux驱动开发常用调试工具---之内存读写工具devmem和devkmem
- Android Studio方法超过65535解决办法
- 铺铜
- Javascript继承
- Nginx日志切割脚本
- Echart 饼状图,柱状图series.data数据动态设置
- Oracle创建directory
- 什么是TLB ?
- Linux升级openssh及问题总结
- 高德地图之定位篇----->定位、预测天气、围栏、搜索周边、行踪轨迹
- Thinkphp3.2.3 解决关联模型的自动生成问题($_auto)
- 在linux上使用tomcat
- android触摸事件分发机制
- 虚拟机VMware3种网络模式