环境
js中引入
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
1.需求图
2.代码实现
//以下是主要的代码,其他部分没摘
<!--饼图 -->
<div class="row">
<div id="loading1" style="margin-bottom: 20px;"></div>
</div>
<script type="text/javascript">
// 查询数据,从后台查询数据,并且符合条件则显示饼图,不满足则隐藏
function loadGrid(){
var param = getLoadGridParam();
Tool.asyncLoad("<%=path%>/serv/phone/TC/TCAction/loadTableDataQuota.json",param,function(data) {
var json = Tool.toJSON(data);
if (json.code == 0) {
var rows = json.data;
domGrid.loadData(rows);
var result = $("#table_grid tr");
result.children("th").get(1).innerHTML = flag.unitName
+ '<img alt="" src="/nesale/serv/phone/img/timg2.png">';
} else {
layer.msg(json.msg);
}
});
if(param.UNIT == 'PROVINCE'){
getPieData();
}else{
$("#loading1").hide();
}
};
//传递饼图参数
function getPieData(){
var param = getLoadGridParam();
//ajax请求后台,如果请求成功,将数据显示在饼图中
$.ajax({
async:true,
type: "post",
data:{"QUOTA":param.QUOTA,"STAGE":param.STAGE,"DATE":param.DATE},
url: '<%=path%>/serv/phone/TC/TCAction/getAreaPie.json',
dataType: "json",
success:function(data){
console.log(data);
getPie(data);
layer.closeAll('loading'); //关闭 load 等待层
}
});
}
//获得饼图,主要的饼图显示方式
function getPie(data){
var width = $("#loading1").parent().width();
$("#loading1").height(180).width(width);
if(data.rs==null||data.rs==""||data.rs.legend==null || data.rs.seriesList.length == 0){
$("#loading1").html(emptyMsg);
return;
}
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
right: 10,
data: [
//{name: '工作', value: 8},
{name : data.rs.seriesList[1].name, value: data.rs.seriesList[1].value},
{name : data.rs.seriesList[0].name, value: data.rs.seriesList[0].value}
]
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '90%'],
avoidLabelOverlap: false,
label: {
position : 'inner',
normal: {
//show: false,
//position: 'center'
position:'inside',
formatter: '{d}%'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: data.rs.seriesList[0].value, name: '直销',itemStyle:{normal:{color:'#FF0000'}}},
{value: data.rs.seriesList[1].value, name: '店销',itemStyle:{normal:{color:'#02B0ED'}}}
]
}
]
};
var myChart = echarts.init(document.getElementById("loading1") );
myChart.setOption(option);
}
</script>