Echarts富文本

Posted 2020-11-23 huangpeideng

function GetChannelProportion(FilterValue, lan) {

var districtString = FilterValue.districtList.toString();
var storeString = FilterValue.storeList.toString();
$
.ajax({
type : ‘POST‘,
url : "/OPS/SalesReport/ChannelProportion",
data : {
region : FilterValue.region,
district : districtString,
store : storeString,
reportType : FilterValue.reportType,
filterType : FilterValue.filterType,
year : FilterValue.year,
beginDate : FilterValue.endDate,
endDate : FilterValue.endDate,
storeType : FilterValue.storeType
},
success : function(result) {

try {
var weatherIcons = {
‘imageup‘ : ‘../img/Arrow-Green.png‘,
‘imagedown‘ : ‘../img/Arrow-Red.png‘
};
let jsonda = JSON.parse(result);

let allSale = 0, sngScgSale = 0;
for (var i = 0; i < jsonda.channelAndSales.length; i++) {
var item = jsonda.channelAndSales[i];
let sale = Number(item.thissale);
allSale += sale;
if (item.channel == "SnG"
|| item.channel == "SCO") {
sngScgSale += sale;
}
}

let num = sngScgSale == 0 ? 0
: ((sngScgSale / allSale) * 100);
$("#sngAndSco").html(num.toFixed(2));

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
try {

var list = [];
var jsons = JSON.parse(result);

var channel = "";
var traffic = "";
var penetration = "";
if (lan == "en_US") {
channel = "Channel";
traffic = "Traffic";
penetration = "Penetration";
} else {
channel = "渠道";
traffic = "客流";
penetration = "渗透率";
}
var thistotal = 0;
var lasttotal = 0;
for (var i = 0; i < jsons.channelAndSales.length; i++) {
var sales = jsons.channelAndSales[i];
thistotal += Number(sales.thissale);
lasttotal += Number(sales.lastsale);
}

//channelAndSales,sngAndSco
for (var i = 0; i < jsons.channelAndSales.length; i++) {
var sales = jsons.channelAndSales[i];
//获取随机颜色
var rancolor = "#"
+ String(Math.random(16))
.substring(2, 8);
//已经定好的颜色
if (sales.channel == "SnG") {
rancolor = "#2888cf";
}
if (sales.channel == "SCO") {
rancolor = "#db8b1a";
}
if (sales.channel == "Manned") {
rancolor = "#60a133";
}
var itemName=sales.channel;
if(lan=="zh_CN"){
if(sales.channel=="Manned"){
itemName="人工收银";
}
if(sales.channel=="SnG"){
itemName="扫码购";
}
if(sales.channel=="SCO"){
itemName="自助收银";
}
}else {
itemName=sales.channel;
}

var aa = "AA";
var item = {
value : Number(sales.thissale),
lastvalue : Number(sales.lastsale),
name : itemName,
label : {
show : true,
normal : {
formatter : function(params) {
var data = params.data;
var imgvalue;
var thisper = thistotal == 0 ? 0
: (data.value / thistotal);
var lastper = lasttotal == 0 ? 0
: (data.lastvalue / lasttotal);

if (thisper > lastper) {
imgvalue = "{imageup|}"
} else if (thisper < lastper) {
imgvalue = "{imagedown|}"
} else {
imgvalue = ""
}

if (FilterValue.reportType=="YTD"||FilterValue.reportType=="MTD"||FilterValue.reportType=="WTD") {
imgvalue = "";
}

return "{b|"
+ params.name
+ "}
"
+ "{a|"
+ params.percent
+ "%}"
+ imgvalue;
},
rich : {
a : {
color : ‘#212025‘,
fontFamily : ‘Microsoft YaHei‘,
fontSize : "16",
align : ‘left‘,

},
b : {
color : rancolor,
fontFamily : ‘Microsoft YaHei‘,
fontSize : "16",
align : ‘left‘,
},

imageup : {
height : 16,
align : ‘left‘,

backgroundColor : {
image : weatherIcons.imageup
}
},
imagedown : {
height : 16,
align : ‘left‘,

backgroundColor : {
image : weatherIcons.imagedown
}
}
}

}
},
labelLine : {
normal : {
lineStyle : {
color : {
type : ‘linear‘,
x : 0,
y : 0,
x2 : 0,
y2 : 1,
colorStops : [
{
offset : 0,
color : ‘#878787‘ // 0% 处的颜色
},
{
offset : 1,
color : rancolor
// 100% 处的颜色
} ],
global : false
// 缺省为 false
}
}
}
},
itemStyle : {
normal : {
color : rancolor
}
},
}
list.push(item);
}

var option = {
tooltip : {
trigger : ‘item‘,
// formatter : "{a} <br/>{b}: {c} ({d}%)"
formatter:function (params) {
var str = params.seriesName+"<br/>"+params.name+":"+ commafy(params.value) +"("+params.percent+"%)";
return str;
}
},
title : {
text : traffic + "
" + penetration,
// subtext:penetration,
left : ‘center‘,
top : ‘center‘,
align : ‘center‘,
textStyle : {
color : ‘#212025‘,
fontSize : ‘120%‘,
fontWeight : ‘bolder‘,
fontfamily : "Microsoft YaHei",
lineHeight : 20
}
},

series : [ {
name : channel,
type : ‘pie‘,
radius : [ ‘45%‘, ‘70%‘ ],
data : list
} ]
};
} catch (err) {
alert("定义option错误:" + err);
}

if (typeof option === "object") {
myChart.setOption(option, true);
}

} catch (err) {
alert("SnG_SCO_ChannelTenderPie" + err);
}

},
error : function(XMLHttpRequest, textStatus,
errorThrown) {

// 状态码

console.log();
// 状态

console.log(XMLHttpRequest.readyState);
// 错误信息 
// alert(textStatus);
console.log(textStatus);

}
});
}