var fontColor = "#000";
var seriesName = "";
let noramlSize = 16;
var datas = {
dataArr2: [600000],
dataArr3: [380000]
};
var total = datas.dataArr2[0] + datas.dataArr3[0];
var pencent2 = ((datas.dataArr2[0] / total) * 100).toFixed(2);
var pencent3 = ((datas.dataArr3[0] / total) * 100).toFixed(2);
var symbolSize = [3, 27];
option = {
animation: false,
xAxis: {
show: false,
splitLine: {
show: false
}
},
yAxis: {
show: false,
data: [],
axisTick: {
show: false
},
axisLine: {
show: false
}
},
tooltip: {
show: true,
borderRadius: 5,
backgroundColor: "#f6f6f6",
textStyle: {
color: "#000",
fontSize: 20
},
formatter: function(v) {
if (v.seriesName == "男生") {
return (
'<div class="tooltipBox">' +
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAACUUlEQVQ4jYXUS6iNURQH8N851yvldVEGXjGWDDCROvKIgdcAuQy8OjISZ3BJ9yJ0yyEZ6B6vlHu9kld5hlMy8UqizOQ1UB6hlOi6Bnt/fPdz8K/d3q291tr/vfZ/r1zrzptqoDeWYiYmYnC0v8VdXEIbvhRLhS6B+UyiHFbhFVoxB0NQF8cQzI57L7GqUq7m/pawB05jP+pxHysxOu71iOsVkWV99D1bKVd7ZRPW4Rzm4zOWYDwO4Rm+x/EMh2MZluBjvMW5Srlal064KdbrPSah3f/Rjsl4hxloShKOQCM6sQiPY0BrtNUaR6LPYyyItsZKuToyj7XohWO4nmLQ8x/sftWsWCpUcVSo8bp8ZAW7MkHLhFevNRZlfHfHeWFekMhNPEw5bMCJeGoW3XEcG1MsH+EaXnfDhBpBs4THuZs6PcGayHAEdqSSzuBPYSfYHucmDErZ69Gc8emCvyW8Ekc/bEnZN2OAcL2LtQK74YHfWkpjHaahiH34IVy3A+uziSrl6g30yWMopmNsxuepoMU6oY674voAnmSSjcMUDMvjZIpRFs3C95ou/KRP4o/IIGF8Ih9P/ya0q0LG8b2uNdwmtLA0u6lYjK/Yk8dztAiCPYUxmaT7cE/oPnsze2MEvebQUiwVXiSvvBVXBYncQkMq6Jug1fFxnaABtzEQlyP7X7LpwFycR3+hG9/BcowSfkf3uF4RGbehL85gbrFU6CDIJsFXzBOaaktkVesXJfggdKmDxVKhMzFmhd0pyGI4VuMC3sQbdMT1+bg3DAfSyeAn/2KZOHe3kBkAAAAASUVORK5CYII=" alt />' +
' <span style="font-size:18px">' +
v.seriesName +
" : </span>" +
'<span style="font-size:25px">' +
datas.dataArr2 +
"</span>" +
'<span style="font-size:16px"> 个</span><br/>' +
'<span style="font-size:16px">占比 : ' +
pencent2 +
" %</span>" +
"</div>"
);
} else if (v.seriesName == "女生") {
return (
'<div class="tooltipBox">' +
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAACKElEQVQ4jX3VTYiOURQH8N/zjITGYIEpdpTlqHkZlI2d5CsfSRYWvCmfM/JRhpURyveC9yUKCxnyUbYSJR9vWUg2ZEMNVj7KAvNa3Ps0j3eed07dnnPPPed/77nP/5ybdFbqCmQUVmEJ5mIqEgzgJR7gNn7XysMDG2UNTmJ6wdoEzMIGfEI3+vMOaU5vwUXcjGBvY8BsTIpjNnbhDabhZqnqcqmqJQNJcilfizv/Qg8qKLyPmP4mnMY43MD6Wlk9O+H2CPYDi3BhBDBx7WL0/Y512JGdcDLeoQ0rcXcEoCJZhnv4iRkptkaw+zmwxULaSROQboEBamX3cQet2JbG48KJXMChOF9bAJax4GDOlsWuSwVuvcCTnEMlfo9hbM4+BsejXs3Zn+I5BpImxE7jJp3oRV+078NRvEIJg43EThXLoHBPsB/tQrUciLae6DNMiiolkye4hdU4gr8YL/yAR82CRuExRmO+4dzbi6XYGOe/sacRpFSV4Bl+pTGdLiwo2PADzgj0SaL+vsBvodBE2lOhbGB3kyz68DGOw018stgbSWelPiXu2orlAsEbZUL8fitYWyHc63fMTPFFoAahQXQVBH1rAjYPV6PeWyv7mtHmrJB6Gx5is+ZlJ65tib7jcb1Wdo4hHtaFbnNFaEdVvMZOdGBiHB2G+uF5oYouGWKBokpZg1NCAx1JPqKnVv6/YxcRu1/oOtmbMkegVh2fhZLM3pQ/jcH/AOG/hlAJUn4xAAAAAElFTkSuQmCC" alt />' +
' <span style="font-size:18px">' +
v.seriesName +
" : </span>" +
'<span style="font-size:25px">' +
datas.dataArr3 +
"</span>" +
'<span style="font-size:16px"> 个</span><br/>' +
'<span style="font-size:16px">占比 : ' +
pencent3 +
" %</span>" +
"</div>"
);
}
}
},
series: [
{
type: "pictorialBar",
barCategoryGap: 2,
name: "男生",
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "#2586FF" // 0% 处的颜色
},
{
offset: 1,
color: "#2586FF" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
},
symbol: "Rect",
symbolRepeat: "fixed",
symbolClip: true,
symbolSize: symbolSize,
data: datas.dataArr2,
z: 10,
symbolMargin:[3,0]
},
{
type: "pictorialBar",
barCategoryGap: 2,
name: "女生",
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "#FFCC00" // 0% 处的颜色
},
{
offset: 1,
color: "#FFCC00" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
},
symbolRepeat: "fixed",
symbol: "Rect",
symbolSize: symbolSize,
symbolClip: true,
data:[total],
z: 5,
symbolMargin:[3,0]
}
]
}