echarts饼状图怎么显示数据（Echarts饼状图详解及示例）
echarts饼状图怎么显示数据（Echarts饼状图详解及示例）eg2:内嵌图及添加点击事件eg1效果图：eg1：基本示例<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <!--引入ECharts文件--> <scriptsrc="echarts.js"></script> <divid="pie1"style="width:600px;height:400px;"></div> <scripttype="text/javascript"> varmyChart1=echarts.init(document.getElementById('pie1')); option1={ title:{
前言说明：因工作需要用到图统计数据作为展示，用到echarts3（你也可以考虑用阿里的AntV:http://antv.alipay.com/zh-cn/index.html 或者国外的一些图形插件）。发现官方文档只有根据属性查询，没有根据图的类型文档说明。以下重点写的例子主要是官方示例中没有提及，但是我工作中用到了的示例。
1. 准备工作
到echarts3（注意是echarts3，不是echarts2）官方下载echarts或者自定义下载，下载地址：http://echarts.baidu.com/download.html
2. 示例及说明 代码中未说明的配置项，可以在官网查看。还有很多配置属性，示例中并没有使用到。配置文档地址：http://echarts.baidu.com/option.html#tooltip.trigger
eg1效果图：
eg1：基本示例
<!DOCTYPEhtml><html><head>
<metacharset="utf-8">
<!--引入ECharts文件-->
<scriptsrc="echarts.js"></script>
<divid="pie1"style="width:600px;height:400px;"></div>
<scripttype="text/javascript">
varmyChart1=echarts.init(document.getElementById('pie1'));
option1={
title:{
text:'按类型统计'
top:'bottom'
left:'center'
textStyle:{
fontSize:14
fontWeight:''
color:'#333'
}
} //标题
tooltip:{
trigger:'item'
formatter:"{a}<br/>{b}:{c}({d}%)"，/*formatter:function(val){//让series中的文字进行换行
console.log(val);//查看val属性，可根据里边属性自定义内容
varcontent=var['name'];
returncontent;//返回可以含有html中标签
} *///自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
} //提示框，鼠标悬浮交互时的信息提示
legend:{
show:false
orient:'vertical'
x:'left'
data:['50%-学生' '25%-老师' '25%-家长']
} //图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
graphic:{
type:'text'
left:'center'
top:'center'
style:{
text:'用户统计\n' '100' //使用“ ”可以使每行文字居中
textAlign:'center'
font:'italicbolder16pxcursive'
fill:'#000'
width:30
height:30
}
} //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
series:[
{
name:'用户统计' //tooltip提示框中显示内容
type:'pie' //图形类型，如饼状图，柱状图等
radius:['35%' '65%'] //饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
//roseType:'area' 是否显示成南丁格尔图，默认false
itemStyle:{
normal:{
label:{
show:true
textStyle:{color:'#3c4858' fontSize:"18"}
formatter:function(val){//让series中的文字进行换行
returnval.name.split("-").join("\n");}
} //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
labelLine:{
show:true
lineStyle:{color:'#3c4858'}
}//线条颜色
} //基本样式
emphasis:{
shadowBlur:10
shadowOffsetX:0
shadowColor:'rgba(0 0 0 0.5)' //鼠标放在区域边框颜色
textColor:'#000'
}//鼠标放在各个区域的样式
}
data:[
{value:50 name:'50%-学生'}
{value:25 name:'25%-老师'}
{value:25 name:'25%-家长'}
] //数据，数据中其他属性，查阅文档
color:['#51CEC6' '#FFB703' '#5FA0FA'] //各个区域颜色
} //数组中一个{}元素，一个图，以此可以做出环形图
] //系列列表
};
myChart1.setOption(option1);</script></head></html>
eg2效果：
eg2:内嵌图及添加点击事件
<!DOCTYPEhtml><html><head>
<metacharset="utf-8">
<!--引入ECharts文件-->
<scriptsrc="echarts.js"></script>
<divid="pie1"style="width:600px;height:400px;"></div>
<scripttype="text/javascript">
varmyChart1=echarts.init(document.getElementById('pie1'));
option1={
tooltip:{
trigger:'item'
formatter:"{a}<br/>{b}:{c}({d}%)"
}
series:[
{
name:'学段分类统计'
type:'pie'
radius:[0 '35%']
label:{
normal:{
position:'inner'
}
} //扇形区域内显示文字
data:[
{value:25 name:'学生'}
{value:35 name:'教师'}
{value:45 name:'家长'}
]
color:['#10EFE0' '#EF42A4' '#FF8F03']
}
{
name:'角色分类统计'
type:'pie'
radius:['35%' '75%']
labelLine:{
normal:{
show:true
}
}
data:[
{value:10 name:'学生（小学）'}
{value:10 name:'学生（初中）'}
{value:5 name:'学生（高中）'}
{value:15 name:'教师（小学）'}
{value:15 name:'教师（初中）'}
{value:5 name:'教师（高中）'}
{value:20 name:'家长（小学）'}
{value:10 name:'家长（初中）'}
{value:15 name:'家长（高中）'}
]
color:['#51CEC6' '#6AE2D9' '#96F5EF' '#EF87C2' '#F79DD0' '#FFC8E7' '#FFB703' '#FFCD50' '#FFE296']
}
]
};
myChart1.setOption(option1);//添加点击事件，可以点击每个区域，其中params为每个区相关属性，可以根据该属性写各种事件
myChart1.on('click' function(params){
console.log(params);
});</script></head></html>
