function right3_1(data){ var myChart = echarts.init(document.getElementById('right3_1'), 'vintage'); // data = [{ // name: "电脑", // value:10 // }, // { // name: "手机", // value:23 // }, // { // name: "相机", // value:9 // }, // { // name: "刻录机", // value:15 // }, // { // name: "移动载体", // value: 20 // }, // ]; arrName = getArrayValue(data, "name"); arrValue = getArrayValue(data, "value"); sumValue = eval(arrValue.join('+')); objData = array2obj(data, "name"); optionData = getData(data) function getArrayValue(array, key) { var key = key || "value"; 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: [] }; for (let i = 0; i < data.length; i++) { // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']); res.series.push({ name: '', type: 'pie', clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [80 - i * 15 + '%', 70 - i * 15 + '%'], center: ["50%", "55%"], label: { show: false }, itemStyle: { label: { show: false, }, labelLine: { show: false }, borderWidth: 0, }, data: [{ value: data[i].value, name: data[i].name }, { value: sumValue - data[i].value, name: '', itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0 }, tooltip: { show: false }, hoverAnimation: false }] }); res.series.push({ name: '', type: 'pie', silent: true, z: 1, clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [80 - i * 15 + '%', 70 - i * 15 + '%'], center: ["50%", "55%"], label: { show: false }, itemStyle: { label: { show: false, }, labelLine: { show: false }, borderWidth: 0, }, data: [{ value: 7.5, itemStyle: { color: "rgb(3, 31, 62)", 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 / sumValue * 100).toFixed(2) + "%"); } return res; } option = { legend: { show: true, selectedMode: false, icon: "circle", top: "center", top: '12%', bottom: '53%', left: "55%", data: arrName, width: 40, padding: [0, 5], itemGap: 5, formatter: function(name) { return "{title|" + name + "}{value|" + (objData[name].value) + "} {title|台}" }, textStyle: { rich: { title: { fontSize: 20, lineHeight: 30, color: "#00e4ff" }, value: { fontSize:30, padding:[0,8,0,10], lineHeight: 20, color: "#fcdc00" } } }, }, tooltip: { show: true, trigger: "item", formatter: "{a}{b}:{c}({d}%)", textStyle:{ fontSize:30 } }, color: ['#e6923e', '#3ee679','#3e6de6', 'rgb(52, 52, 176)'], xAxis: [{ show: false }], series: optionData.series }; myChart.setOption(option); }