效果图
1.饼图统计页面div
<div class="left_top2" onclick="ak_left_click2.top1Click();">
<div class="left2_bg">
<div class="visual_title" style="margin-bottom: 0px;height: 27px;">
<span class="Top_title" style="display: inline-block;position: relative;z-index: 10;width: 30%;
margin-left: 12px;font-size: 14px;line-height: 35px;text-align: center;
margin-top: -9px;white-space: nowrap;">合同价格区间(数量)</span>
<img src="images/ksh33.png" style="width: 100%;position: absolute;bottom: 0;left: 0;">
</div>
<div class="visual_box left2_top1" style="height: 90%;">
<div class="window_echarts1" id="right_top2_left" style="width: 50%;height: 90%;top: 16px;"></div>
<div class="echarts_txt" style="right: 5px" id="right_top2_left_right" style="width: 40%;">
<div class="ech_item" >
<i style="background-color: #5470c6;"></i>
<span class="level_num">小于500万美元</span>
<span class="level_main" id="level_main_1"></span>
</div>
<div class="ech_item" >
<i style="background-color: #91cc75;"></i>
<span class="level_num" style="white-space: nowrap;">500万美元-1000万美元</span>
<span class="level_main" id="level_main_2"></span>
</div>
<div class="ech_item" >
<i style="background-color: #fac858;"></i>
<span class="level_num" style="white-space: nowrap;">1000万美元-5000万美元</span>
<span class="level_main" id="level_main_3"></span>
</div>
<div class="ech_item" >
<i style="background-color: #ee6666;"></i>
<span class="level_num">5千万美元-1亿美元</span>
<span class="level_main" id="level_main_4"></span>
</div>
<div class="ech_item" >
<i style="background-color: #73c0de;"></i>
<span class="level_num">1亿美元-5亿美元</span>
<span class="level_main" id="level_main_5"></span>
</div>
<div class="ech_item" >
<i style="background-color: #3ba272;"></i>
<span class="level_num">5亿美元以上</span>
<span class="level_main" id="level_main_6"></span>
</div>
</div>
</div>
</div>
</div>
2.饼图脚本
调用后端接口,将查询到的结果传给回调函数
getData:function(){
var temp = {
currency: 2, // 币种 2:美元 1:人民币
Authorization: akglobe_config.token,
};
// 在建, 新签, 全部 变量
var sgzt_type3 = localStorage.getItem('sgzt_type3');
if(sgzt_type3 == 1){
var projectStatus = akglobe_config.underConstruction;
if(projectStatus){
projectStatus = projectStatus.join("','");
projectStatus = "'" + projectStatus + "'";
}
temp.projectstatus = projectStatus;
}else if(sgzt_type3 == 2){
var year = (new Date).getFullYear();
temp.startTime = ak_right.changeDateFormat2(new Date(year, 0, 1).getTime());
temp.endTime = ak_right.changeDateFormat2(new Date(year, 11, 31).getTime());
}
var options = new Object();
options.url = "/manage-api/getNationItemMoney";
options.type = "get";
options.data = temp;
options.errorback = akglobe_config.errBack;
options.callback = function(data) {
ak_left2Top1.callBackLeft2Top1GET(data);
}
// 如果是测试环境 使用假数据
if(typep002==2){
ak_left2Top1.callBackLeft2Top1GET(ak_ztqg.getNationItemMoney);
}else{
akglobe_config.ajaxQuery(options);
}
},
查询结果的回调函数
callBackLeft2Top1GET:function(data){
if (data && data.flag) {
var data = data.rows;
var dataAll = [];
for (var i = 0; i < data.length; i++) {
if(data[i].name == null || data[i].name == undefined || data[i].name == ""){
continue;
}
var obj = new Object();
obj.name = data[i].name
obj.value = data[i].count
dataAll.push(obj);
if(data[i].name == "小于500万美元"){
$("#level_main_1").text(data[i].count);
}else if(data[i].name == "500万美元-1000万美元"){
$("#level_main_2").text(data[i].count);
}else if(data[i].name == "1000万美元-5000万美元"){
$("#level_main_3").text(data[i].count);
}else if(data[i].name == "5千万美元-1亿美元"){
$("#level_main_4").text(data[i].count);
}else if(data[i].name == "1亿美元-5亿美元"){
$("#level_main_5").text(data[i].count);
}else if(data[i].name == "5亿美元以上"){
$("#level_main_6").text(data[i].count);
}
}
var options = new Object();
options.data = dataAll;
ak_left2Top1.callBackLeft2Top1(options);
}
},
3.echarts饼图代码
设置柱状图自动计算宽度
var objdiv= $('#ak_czRight2'); //document.getElementById('left1_top2_bar');
var docuWidth = $(document).width();
var wt=docuWidth * config.echartsDIvWidht;
objdiv.width(wt);
防止多次加载 重复出现点击事件 必须先禁止关闭
myChart1.off('click');// 防止多次加载 重复出现点击事件 必须先禁止关闭
callBackLeft2Top1: function(options) {
var mainOption = {
tooltip: {
trigger: 'item',
formatter: "{b} <br/> {c} ({d}%)",
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 150;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 20;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
},
series: [{
name: '价格等级数量统计',
type: 'pie',
// roseType: 'area',
radius: '95%',
// color: config.colorList,
color: config.pieColor,
label: {
normal: {
show: true,
position: 'inner',
formatter: '{d}%',
textStyle: {
fontSize: '15px',
color: '#222222'
},
},
},
center: ['50%', '50%'],
data: options.data,
minAngle:20,
itemStyle: {
label: {
// show:true,
// formatter:'{d}%'
show: true,
formatter: function(val) { // 让 series 中的文字进行换行
console.log(val);
return val.name.split(" ").join("\n");
},
rich: {
// 这个'value'样式表示文字颜色为白色
dark: {
color: '#000',
}
}
},
labelLine: {
show: true,
length: 2,
// color: ['#00a3db', '#f7c024', '#d7eff5', '#ffdd19', '#eb8d2d',
// '#6bc7e6'
// ],
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
var objdiv= $('#right_top2_left');
var docuWidth = $(document).width();
var wt=docuWidth * config.echartsDIvWidht;
objdiv.width(wt);
var myChart1 = echarts.init(document.getElementById('right_top2_left'));
myChart1.setOption(mainOption);
},