var equipment = ['按比例就业', '自主创业灵活就业'];
var project = ['按比例就业', '自主创业灵活就业'];
var colorList = ['#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac']
let obj = {
data1: [
{ value: 1000, percent: "22.2%", name: "界碑", label: "界碑", num: 1 },
{ value: 1500, percent: "33.3%", name: " 区桩", label: "区桩", num: 2 },
{ value: 2000, percent: "44.4%", name: " 边界桩", label: "边界桩", num: 3 },
],
data2: [
{ value: 333, percent: "7.4%", name: "界碑Ⅰ型 ", label: "Ⅰ型", num: 1 },
{ value: 333, percent: "7.4%", name: "界碑Ⅱ型 ", label: "Ⅱ型", num: 1 },
{ value: 334, percent: "7.4%", name: "界碑Ⅲ型 ", label: "Ⅲ型", num: 1 },
{ value: 500, percent: "11.1%", name: " 区桩Ⅰ型", label: "Ⅰ型", num: 2 },
{ value: 500, percent: "11.1%", name: " 区桩Ⅱ型", label: "Ⅱ型", num: 2 },
{ value: 500, percent: "11.1%", name: " 区桩Ⅲ型", label: "Ⅲ型", num: 2 },
{ value: 666, percent: "14.8%", name: " 边界桩Ⅰ型", label: "Ⅰ型", num: 3 },
{ value: 666, percent: "14.8%", name: " 边界桩Ⅱ型", label: "Ⅱ型", num: 3 },
{ value: 666, percent: "14.8%", name: " 边界桩Ⅲ型", label: "Ⅲ型", num: 3 },
],
}
const color = ['rgb(0,200,233)', 'rgb(0,233,153)', 'rgb(112,142,255)', 'rgb(102,224,227)', 'rgb(50,197,233)', 'rgb(55,161,218)', 'rgb(159,230,184)', 'rgb(255,219,92)', 'rgb(150,191,255)', 'rgb(131,120,234)', 'rgb(157,150,245)', 'rgb(231,188,243)',]
option = {
backgroundColor: '#000C1C',
color: color,
tooltip: {
show: true,
trigger: 'item',
// triggerOn: 'click',
alwaysShowContent: true,
position: ['56%', '15%'],
backgroundColor: "rgba(0,0,0,0)",
borderWidth: 0,
formatter: function (param) {
// console.log("qqq", param)
// console.log("www", obj.data1)
let p1 = obj.data1.filter(e => {
return e.num == param.data.num
})
let p2 = obj.data2.filter(e => {
return e.num == param.data.num
})
console.log("eee", p1, p2)
let str = ""
str += "<div style='height:200px;width:170px;padding:5px 5px 5px 5px;color: #fff;'>"
str += "<p style='font-size: 18px;color: rgba(6, 227, 247, 1);font-family: SourceHanSansCN-Regular;'>"
str += `${p1[0].label}数量</p>`
str += `<p style='font-family: SourceHanSansCN-Regular;font-size: 16px;margin:17px 0 32px 0 '><span style='font-size: 30px;font-family: DINCond-Regular;'>${p1[0].value}</span>个<span style='font-size: 30px;margin: 0 0 0 25px;font-family: DINCond-Regular;'>${p1[0].percent}</span></p>`
str += "<table>"
str += "<tr>"
str += `<td><span style="width: 12px;height: 12px;background-color: ${color[p2[0].num * 3]};display: inline-block;margin:0 10px 0 0"></span></td>`
str += `<td><span style="font-size: 16px;color: rgba(170, 233, 255, 1);margin:0 8px 0 0;">${p2[0].label}</span></td>`
str += `<td><span style="font-size: 16px;margin:0 8px 0 0;">${p2[0].percent}</span></td>`
str += `<td>${p2[0].value}</td>`
str += "</tr>"
str += "<tr>"
str += `<td><span style="width: 12px;height: 12px;background-color: ${color[p2[0].num * 3 + 1]};display: inline-block;margin:0 10px 0 0"></span></td>`
str += `<td><span style="font-size: 16px;color: rgba(170, 233, 255, 1);margin:0 8px 0 0;">${p2[1].label}</span></td>`
str += `<td><span style="font-size: 16px;margin:0 8px 0 0;">${p2[1].percent}</span></td>`
str += `<td>${p2[1].value}</td>`
str += "</tr>"
str += "<tr>"
str += `<td><span style="width: 12px;height: 12px;background-color: ${color[p2[0].num * 3 + 2]};display: inline-block;;margin:0 10px 0 0"></span></td>`
str += `<td><span style="font-size: 16px;color: rgba(170, 233, 255, 1);margin:0 8px 0 0;">${p2[2].label}</span></td>`
str += `<td><span style="font-size: 16px;margin:0 8px 0 0;">${p2[2].percent}</span></td>`
str += `<td>${p2[2].value}</td>`
str += "</tr>"
str += "</table></div>"
return str
}
},
series: [{
name: '界桩碑',
type: 'pie',
center: ['30%', '50%'],
radius: [0, '45%'],
label: {
position: 'inner',
fontSize: 14,
color: '#fff'
},
itemStyle: {
borderColor: '#fff',
borderWidth: 0,
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
selectedMode: 'single',
data: obj.data1
},
{
name: 'ⅠⅡⅢ',
type: 'pie',
center: ['30%', '50%'],
radius: ['60%', '70%'],
itemStyle: {
borderColor: '#fff',
borderWidth: 0,
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
emphasis: {
disabled: false,
scale: false,
},
label: {
normal: {
position: 'inner',
formatter: function (params) {
if (params.value != 0)
return params.data.label
else
return ''
},
show: false,
fontSize: 14
},
},
data: obj.data2
}
]
};