ECharts 使用

最近项目中要做图形报表，要求使用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);
　　}
});