jsp显示echarts饼状图Echarts饼状图详解及示例

1. 准备事情

到echarts3（把稳是echarts3，不是echarts2）官方下载echarts或者自定义下载，下载地址：http://echarts.baidu.com/download.html

2. 示例及解释代码中未解释的配置项，可以在官网查看。
还有很多配置属性，示例中并没有利用到。
配置文档地址：http://echarts.baidu.com/option.html#tooltip.trigger

jsp显示echarts饼状图Echarts饼状图详解及示例 GraphQL

eg1效果图：

eg1：基本示例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><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',是否显示成南丁格尔图，默认falseitemStyle:{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:内嵌图及添加点击事宜