最近项目中要做图形报表，要求使用echarts实现，图形报表有很多中实现之前也接触过，但echarts还是头一次听说，正好可以趁这个机会好好学习一下它。

  之前不知道就不知道啦，现在知道了就了不得了，一下子喜欢上了echarts，今后项目中要是让做报表我肯定首选echarts在没有强制要求的前提下。主要是echarts太完美了：1，开源软件，无私的为我们提供漂亮的图形界面；2，使用简单，默默的为我们封装了重要的js，只要会引用就会使用echarts；3，种类多，echarts为我们提供了各种图标，其中最具象征的就是地图了；4，兼容性好，基于html5动画渲染超棒。

 

相关案例：http://echarts.baidu.com/echarts2/doc/example.html

 

自己的案例：

<div id="domainChart" class="oPies"></div>

<script src="${pageContext.request.contextPath}/web/script/echarts-2.2.3/build/dist/echarts-all.js"></script>

 

//配置echarts

var domainChart = echarts.init(document.getElementById('domainChart'));

//样式

var option = {

　　backgroundColor : '#f8f8f8',

　　color : ['#31b2eb','#99ce7e','#40b298','#e7775f','#f8d071','#a56ca3','#ea7796','#6874ae'],

　　tooltip : {

　　　　trigger: 'item',

　　　　formatter : "{a} <br /> {b} : {c} ({d}%)"

　　},

　　legend: {

　　　　x:'right',

　　　　y:'center',

　　　　orient : 'vertical',

　　　　textStyle : {

　　　　　　color : '#2063c3',

　　　　　　fontFamily : 'Tahoma,Helvetica,Arial'

　　　　}

　　},

　　calculable : true,

　　series : [

　　　　{

　　　　name:'数量',

　　　　type:'pie',

　　　　radius:'60%',

　　　　center : ['40%','50%'],

　　　　data:[]

　　　　}

　　]

};

 

//填充按主题域汇总信息

var domainChartPie = $.extend(true, {}, option);

 

//绘制

$.getJSON('${pageContext.request.contextPath}/statAnalysis/loadDataelementCountBySbjct.action',{},function(data){

　　if (data.retcode == '0000') {

　　　　//更新数据

　　　　var chart_data = [],chart_legend = [];

　　　　for(var i=0,len=data.obj[0].length;i<len;i++){

　　　　　　chart_legend.push(data.obj[0][i].label);

　　　　　　chart_data.push({

　　　　　　　　name : data.obj[0][i].label,

　　　　　　　　value : data.obj[0][i].code

　　　　　　});

　　　　}

　　　　domainChartPie.legend.data = chart_legend;

　　　　domainChartPie.series[0].data = chart_data;

　　　　//绘制图形

　　　　domainChart.setOption(domainChartPie);

　　}else{

　　　　alert(data.errorMsg);

　　}

});