如何用echarts创建一个饼图？
- 原创
- |
- 浏览：685
- |
- 更新：
![如何用echarts创建一个饼图？]()
1![如何用echarts创建一个饼图？]()
2![如何用echarts创建一个饼图？]()
3![如何用echarts创建一个饼图？]()
4![如何用echarts创建一个饼图？]()
5
如今前端开发越来越火，许多公司的业务离不开图表的制作，目前echarts是一个不错的图表制作插件，下面来介绍一下如何制作一个饼图
方法/步骤
首先点击左下角开始，找到eclipse，启动eclipse
![如何用echarts创建一个饼图？]()
使用requirejs加载echarts插件
![如何用echarts创建一个饼图？]()
新建饼图的html，js文件，创建方式如图
![如何用echarts创建一个饼图？]()
生成饼图的js代码如下，截图只是部分代码，data部分自己补充数据就可以了
dangerRecType = echarts.init(document.getElementById('dangerRecType'));
dangerRecTypeOption = {
title : {
text : '危险品种类分析',
subtext : '',
x : 'center',
textStyle : {
fontWeight : 'normal',
color : '#06FFFF',
fontSize : 16
}
},
legend : {
data : [],
top : 'bottom',
textStyle : {
color : '#fff'
}
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b}: {c} ({d}%)"
},
series : {
name : '数量',
type : 'pie',
radius : '60%',
center : [ '50%', '50%' ],
data : [],
itemStyle : {
emphasis : {
shadowBlur : 10,
shadowOffsetX : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
},
label : {
normal : {
show : true,
position : 'inner',
formatter : function(param) {
if (param.percent > 2) {
return param.name;
} else {
return '';
}
},
textStyle : {
color : '#fff',
fontSize : 12
}
}
},
labelLine : {
normal : {
show : true
}
}
}
}
dangerRecType.setOption(dangerRecTypeOption);
![如何用echarts创建一个饼图？]()
最终生成的样式如图所示，饼图已经生成
![如何用echarts创建一个饼图？]()
END- 相关内容未经授权抓取自百度经验
