ECharts图表图例5
java
用eclipse软件
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入ECharts脚本 -->
<script src="js/echarts.js"></script>
<title>绘制标准饼图</title>
</head>
<body>
<!-- 为ECharts准备一个指定了大小的DOM -->
<div id="main" style="width: 600px; height: 400px ">
</div>
<script type="text/javascript">
var myChart= echarts.init(document.getElementById("main"));
var option = {
title:{
text:'影响健康、寿命的各类因素', subtext:'WHO统计调查报告', left:'center'
},
tooltip:{
trigger:'item',
formatter:"{a} <br/>{b} : {c} ({d}%)" }, lengend:{
orient:'vertical',
left:62,
top:22,
data:['生活方式','遗传因素','社会因素','医疗条件','气候环境']
},
toolbox:{
show:true,
left:444,
top:28,
feature:{
mark:{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',
redius:['45%','75%'],
center:['58%','55%'],
clockWise:true,
data:[
{ value:60, name:'生活方式'},
{ value:15, name:'遗传因素'},
{ value:10, name:'社会因素'},
{ value:8, name:'医疗条件'},
{ value:7, name:'气候环境'}, ] }
]
};
myChart.setOption(option);
</script>
</body>
</html>
结果：
