echarts画饼图
话不多说,直接上代码!更多内容请参考echarts官方说明!
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('tag-items-wt-bt'),'dark');
var param = {legen:[],data:[]};
for(var i = 0; i < data.length; i++){
var item = data[i];
console.log(item);
for(var i in item){
param['legen'].push(i);
var obj = {};
obj.value = item[i];
obj.name = i;
param["data"].push(obj);
}
}
option = {
backgroundColor: 'rgba(0,0,0,.20)',
title : {
text: '机构问题类型分析',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'right',
// data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
data: param["legen"]
},
series : [
{
name: '错误分析',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:param["data"],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option, true);
其中data是我请求的ajax数据,格式的话大概就是这个样子
item就是需要渲染的页面数据
最重要的还是这块的内容
将数组循环遍历然后定义成echarts官方要求的{name:"" ,value:""}这种形式,然后直接进行数据渲染即可!
效果就是如下效果。加油!