本文主要是介绍echarts环形图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
let dataValue=[{value: 30,name: '桥梁',percent: 0.25,color: 'rgba(248,95,94,1)',radius: ['75%', '80%'],center: ['22%', '50%'],},{value: 15,name: '隧道',percent: 0.25,color: 'rgba(243,185,71,1)',radius: ['65%', '70%'],center: ['22%', '50%'],},{value: 18,name: '路基',percent: 0.25,color: 'rgba(243,185,71,1)',radius: ['55%', '60%'],center: ['22%', '50%'],},{value: 12,name: '深路堑边坡',percent: 0.25,color: 'rgba(3,151,255,1)',radius: ['45%', '50%'],center: ['22%', '50%'],},{value: 10,name: '既有线',percent: 0.25,color: 'rgba(3,249,245,1)',radius: ['35%', '40%'],center: ['22%', '50%'],},]let a = dataValue.map((t) => {t.value = parseInt(t.value);return t;});const sum = a.reduce((per, cur) => per + cur.value, 0);const gap = (1 * sum) / 100;const pieData1 = [];const gapData = {name: "",value: gap,itemStyle: {color: "transparent",},};let total = 0;dataValue.forEach((item) => {total += parseInt(item.value);});for (let i = 0; i < dataValue.length; i++) {// 第一圈数据// pieData1.push({// ...this.dataValue[i],// });pieData1.push({name: dataValue[i].name,value: dataValue[i].value,itemStyle: {color: dataValue[i].color,},});}
option = {backgroundColor: "#031a40",tooltip: {confine: true,textStyle: {fontSize: 13, // 字体大小},},legend: {show: true,// orient: "vertical",bottom: "10%",icon: "circle",width: "75%",// top: "middle",itemWidth: 12,itemHeight: 12,itemGap: 18,data: dataValue.map((item) => item.name),textStyle: {color: "#fff",fontSize: 13,letterSpacing: 10,rich: {a: {fontSize: 14,width: "auto",marginLeft: 10,padding: [0, 0, 0, 5],// height: 30,},b: {fontSize: 14,width: 40,padding: [0, 0, 0, 15],color: "#fff",},},},formatter: (param) => {var str = "";console.log();dataValue.forEach((item, index) => {if (item.name == param) {str = "{a|" + item.name + "}" + "{b|" + item.value + "}";return;}});return str;},},// grid: {// show: false,// left: "0",// right: "0",// bottom: "1%",// top: "0%",// containLabel: true,// },// title: {// //圆环中间内容// text: "184",// subtext: "类型总数",// left: "21%",// top: "43%",// textStyle: {// color: "#fff",// fontSize: 20,// align: "center",// },// subtextStyle: {// fontSize: 15,// fontWeight: "500",// align: "center",// color: "#fff",// // marginTop: "-10px",// },// },color: ["rgba(0,150,255,1)", "rgba(0,204,255,2)"],series: [{name: "",avoidLabelOverlap: true, //防止标签重叠type: "pie",radius: ["60%", "40%"], //大小center: ["50%", "36%"], //位置data: pieData1,label: {show: false,formatter: function (params) {},textStyle: {fontSize: "18",fontWeight: "bold",color: "#fff",},},emphasis: {show: false,},},{type: "gauge",zlevel: 1,// z: 198,splitNumber: 70,radius: "39%",center: ["50%", "36%"],startAngle: 90,endAngle: -269.9999,axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: true,length: 6,lineStyle: {width: 3,color: "rgba(108,173,202,1)",},},data: [{value: 198,name: "测已断面",title: {// 配置“家居总数”的样式show: true,fontSize: 18,fontWeight: 700,// fontFamily: fontFamily.fontFamily65W,color: "rgba(128,255,255,1)",offsetCenter: [0, "20%"],},},],detail: {// 调节数字位置offsetCenter: [-2, -17],fontSize: 25,fontWeight: 700,// fontFamily: fontFamily.fontFamily95W,color: "rgba(128,255,255,1)",},pointer: {show: false,},// detail: {// show: 0,// },},],};
这篇关于echarts环形图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
