前端开发echarts环形图
摘要： 前端开发工具dream 前端开发工具2017 前端的的开发工具 封装一个echarts环形图的函数，两个参数，数据data和id，可改为类名复用。看代码，外部引用echarts.js文件 echarts 配置项： 控制圆的大小宽度……
| 前端开发工具dream |
| 前端开发工具2017 |
| 前端的的开发工具 |
封装一个echarts环形图的函数，两个参数，数据data和id，可改为类名复用。看代码，外部引用echarts.js文件
echarts
配置项：
控制圆的大小宽度：series.radius，例如[‘80%’, ‘90%’]
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Title</title>
</head>
<body>
<div
id=”demo”
style=”width: 400px;height: 400px;border: 1px solid antiquewhite;margin:0 auto;background-color:#f5f5f5;”
></div>
</body>
<script src=”https://cdn.bootcss.com/echarts/3.5.4/echarts.js”></script>
<script>
pieShow(75, ‘demo’)
function pieShow(data, id) {
var pieId = echarts.init(document.getElementById(id))
// 指定图表的配置项和数据
var pieId_option = {
tooltip: {
trigger: ‘item’,
formatter: ‘{a} <br/>{b}: {c} ({d}%)’,
},
color: [‘#ff7f50’, ‘#243c77’],
series: [
{
name: ‘收入完成率’,
type: ‘pie’,
radius: [‘60%’, ‘80%’],
label: {
normal: {
show: true,
position: ‘center’,
},
emphasis: {
show: true,
textStyle: {
fontSize: ’30’,
fontWeight: ‘bold’,
},
},
},
itemStyle: {
//柱形图圆角，鼠标移上去效果
emphasis: {
barBorderRadius: [900],
pieBorderRadius: [900],
},
normal: {
//柱形图圆角，初始化效果
barBorderRadius: [900],
pieBorderRadius: [900],
},
},
data: [
{ value: parseInt(data) },
{ value: 100 – data },
],
},
],
}
// 使用刚指定的配置项和数据显示图表。
pieId.setOption(pieId_option)
}
</script>
</html>
| php和前端开发工具 |
| 前端开发 中的开发工具 |
| android app前端开发工具 |
| java做前端开发工具 |
» 本文来自：前端开发者 » 《前端开发echarts环形图》
» 本文链接地址：https://www.rokub.com/6815.html
» 您也可以订阅本站：https://www.rokub.com
近期评论