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 += "

" str += "

" str += `${p1[0].label}数量

` str += `

${p1[0].value}个${p1[0].percent}

` str += "" str += "" str += `` str += `` str += `` str += `` str += "" str += "" str += `` str += `` str += `` str += `` str += "" str += "" str += `` str += `` str += `` str += `` str += "" str += "

${p2[0].label}	${p2[0].percent}	${p2[0].value}
${p2[1].label}	${p2[1].percent}	${p2[1].value}
${p2[2].label}	${p2[2].percent}	${p2[2].value}

" 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 } ] };

Echarts在线免费图表