【项目实战】---ECharts绘制环形图

前言：

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等）。支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

在项目中也对它进行了实践，这次以饼图为例，一起看看吧，简单易用，效果还很不错。

首先：

引入和ECharts相关的js文件

<script type="text/javascript" src="/Scripts/echarts-all.js"></script>

页面核心：

<div data-options="region:'west',split:true,title:'Demo',collapsible:false"  style="width: 50%;" id="chart0">
</div>

js核心：

测试版本：

可以借助官网很好的做到测试的效果，改动代码查看自己想要的效果---种子。

var option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['谷类','瓜果蔬菜类','肉类','奶制品豆制品类','油脂类']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'食物分类',
type:'pie',
radius : ['50%', '70%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'谷类'},
{value:310, name:'瓜果蔬菜类'},
{value:234, name:'肉类'},
{value:135, name:'奶制品豆制品类'},
{value:1548, name:'油脂类'}
]
}
]
};

但实际上，我们在实现图表的时候都是通过条件筛选，动态加载出数据，生成对应的图，这时候就要借助AJax来实现，更方便跟灵活。同时也可以通过demo的测试去除一些不必要的样式或者新增自己想要的效果，都是可以的。

JS:

//统计图加载js
function DemoChart() {
var strTime_Begin = $('#search_txtTime_Begin').datebox('getValue');
var strTime_End = $('#search_txtTime_End').datebox('getValue');

var foodtype = [];//存放食物类别

$.ajax({
url: '/Statistics/queryFoodType',
type: 'post',
cache: false,
data: {
strTime_Begin: strTime_Begin,
strTime_End: strTime_End
},
success: function (result) {
var obj = eval('(' + result + ')');
//请求成功时执行该函数内容，result即为服务器返回的json对象
for (var i = 0; i < obj.length; i++) {
foodtype.push(obj[i].name)
}
var option0 = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: foodtype,//1、图注，数据格式见上面测试版本js
show: true     //显示
},
calculable: true,
series: [
{
name: '食物分类',
type: 'pie',  //图的类型
radius: ['50%', '70%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: true,
position: 'center',
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
}
},
data: obj  //绘制图的数据源，数据格式见上面测试版本js
}
]
}
var myChart0 = echarts.init(document.getElementById('chart0'));//chart0很关键，和页面标签id要一致
myChart0.setOption(option0);
},
error: function (errorMsg) {
//请求失败时执行该函数
$.messager.alert("系统提示", "图表请求数据失败!");
myChart0.hideLoading();
}
});

}

效果：

总结：

ECarts是一直纯JS的图表库，根据官网的实例可以很快的上手，希望大家可以尝试，让数据统计的显示效果更加明了，形式更加多样。