柚子快報(bào)邀請(qǐng)碼778899分享：前端 Echarts 玉玦圖
柚子快報(bào)邀請(qǐng)碼778899分享：前端 Echarts 玉玦圖
data = [{
name: "AAAA",
value: 754
},
{
name: "BBBB",
value: 611
},
{
name: "CCCC",
value: 400
},
{
name: "DDDD",
value: 200
}
];
let colorArr = ['#41d1a5', '#3cc4ff', '#07e373', '#019dff'];
arrName = getArrayValue(data, "name");
arrValue = getArrayValue(data, "value");
sumVal = eval(arrValue.join('+'));
objData = array2obj(data, "name");
optionData = getData(data)
function getArrayValue(array, key) {
var res = [];
if (array) {
array.forEach(function(t) {
res.push(t[key]);
});
}
return res;
}
function array2obj(array, key) {
var resObj = {};
for (var i = 0; i < array.length; i++) {
resObj[array[i][key]] = array[i];
}
return resObj;
}
function getData(data) {
var res = {
series: [],
yAxis: []
};
let center=["25%", "50%"];
for (let i = 0; i < data.length; i++) {
let radius=[70 - i * 15 + '%', 65 - i * 15 + '%'];
res.series.push({
name: '',
type: 'pie',
clockWise: true, //順時(shí)加載
hoverAnimation: false, //鼠標(biāo)移入變大
radius,
center,
label: {
show: false
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false
},
borderWidth: 5,
},
data: [{
value: data[i].value,
name: data[i].name
}, {
value: sumVal - data[i].value,
name: '',
itemStyle: {
color: "transparent",
borderWidth: 0
},
tooltip: {
show: false
},
hoverAnimation: false
}]
});
res.series.push({
name: '',
type: 'pie',
silent: true,
z: 1,
clockWise: true, //順時(shí)加載
hoverAnimation: false, //鼠標(biāo)移入變大
radius,
center,
label: {
show: false
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false
},
borderWidth: 5,
},
data: [{
value: 7.5,
itemStyle: {
color: "transparent",
borderWidth: 0
},
tooltip: {
show: false
},
hoverAnimation: false
}, {
value: 2.5,
name: '',
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0
},
tooltip: {
show: false
},
hoverAnimation: false
}]
});
res.yAxis.push((data[i].value / sumVal * 100).toFixed(2) + "%");
}
return res;
}
// 環(huán)形圖旁邊的圓點(diǎn)顏色樣式
let rich = {};
colorArr.map((item, index) => {
rich['circle' + index] = {
color: item,
fontSize: 25,
lineHeight:60
};
})
// 圖例的樣式
let legendRich = {
value: {
fontSize: 18,
lineHeight: 30,
color: "#fff",
padding:[0,0,0,20]
},
per:{
fontSize: 20,
lineHeight: 30,
color: "#fff",
padding:[0,0,0,20]
}
};
colorArr.map((item, index) => {
legendRich['title' + index] = {
fontSize: 16,
lineHeight: 15,
color: item,
padding:[0,0,0,20]
};
})
option = {
backgroundColor: '#000',
color: colorArr,
legend: {
show: true,
icon: "circle",
top: "center",
right: '20%',
data: arrName,
width: 100,
padding: [0, 5],
itemGap: 25,
formatter: function(name) {
let str = ``;
console.log("objData", objData)
data.map((item, index) => {
if (item.name == name) {
let per=(item.value/sumVal)*100;
str = `{value|${name}}{${'title'+index}|${per.toFixed(2)}%}{per|${(item.value)}}`
}
})
return str;
},
textStyle: {
rich: legendRich
},
},
grid: {
top: '13%',
bottom: '58%',
left: "20%",
containLabel: false
},
yAxis: [{
type: 'category',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
interval: 0,
inside: true,
position:"right",
formatter: function(v, i) {
return `{${'circle'+i}|●}`
},
rich
},
data: optionData.yAxis
}],
xAxis: [{
show: false
}],
series: optionData.series
};
ending…
柚子快報(bào)邀請(qǐng)碼778899分享：前端 Echarts 玉玦圖
精彩鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Naver跨境導(dǎo)航坊
