Echarts在线免费图表

 
            
/**
   创建时间: 2021-05-10 21:22:00
   作者: 一米阳光
   描述: 环形图指示线  展示男女占比
 */
// 后台返回的数据
const sexObj = {
   manNum: 100,
   womenNum: 200
}

// 开始==============================
const mapConfig = {
   manNum: "男",
   womenNum: "女"
};
// 渐变颜色列表
const colors = [
   {
      color1: "#0055D5",
      color2: "#008EEC"
   },
   {
      color1: "#C532AD",
      color2: "#E58AEA"
   },
   {
      color1: "#FBA61D",
      color2: "#FECF75"
   },
   {
      color1: "#04B2AE",
      color2: "#16CFCD"
   },
   {
      color1: "#4692f6",
      color2: "#67d1f8"
   },
   {
      color1: "#86d140",
      color2: "#73d3a6"
   }
];

const data = []; // 数据
let totalNum = 0; // 总数
let index = 0; // 循环索引

for (const key in sexObj) {
   if (Object.hasOwnProperty.call(sexObj, key)) {
      const element = sexObj[key];
      data.push({
         name: mapConfig[key],
         value: element,
         itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: colors[index].color1 },
               { offset: 1, color: colors[index].color2 }
            ])
         }
      });
      index++;
      totalNum += element;
   }
}

option = {
   legend: {
      bottom: "0%",
      left: "center",
      icon: "circle",
      itemHeight: 12,
      itemWidth: 12,
      itemGap: 20,
      textStyle: {
         //图例文字的样式
         color: "#666666",
         fontSize: 12
      }
   },
   graphic: {
      elements: [
         {
            type: "group",
            width: 200,
            height: 200,
            left: "center",
            top: "center",
            children: [
               {
                  type: "text",
                  style: {
                     text: "男",
                     fill: "#000",
                     fontSize: 60
                  },
                  left: "2%",
                  top: "2%"
               },
               {
                  type: "text",
                  style: {
                     text: "女",
                     fill: "#000",
                     fontSize: 60
                  },
                  left: "32%",
                  top: "2%"
               },
               {
                  type: "text",
                  style: {
                     text: "占",
                     fill: "#000",
                     fontSize: 60
                  },
                  left: "2%",
                  top: "33%"
               },
               {
                  type: "text",
                  style: {
                     text: "比",
                     fill: "#000",
                     fontSize: 60
                  },
                  left: "32%",
                  top: "33%"
               }
            ]
         }
      ]
   },
   series: [
      {
         name: "男女占比",
         type: "pie",
         radius: ["40%", "65%"],
         center: ["50%", "50%"],
         avoidLabelOverlap: false,
         // 关键代码========================
         label: {
            normal: {
               position: "outer",
               formatter: (item) => {
                  let { name, value } = item;
                  return `{a|${name}}：{b|${Math.round((value / totalNum) * 100)}%} \n\n${
                     name == "女" ? `{c|${value}}` : `{d|${value}}`
                     }`;
               },
               padding: [0, -58],
               rich: {
                  a: {
                     fontSize: 12,
                     color: "#545454",
                     padding: [5, 0, 0, 0]
                  },
                  b: {
                     fontSize: 12,
                     color: "#545454",
                     padding: [5, 0, 0, 0]
                  },
                  c: {
                     fontSize: 16,
                     color: "#585858",
                     fontWeight: "bold",
                     align: "left"
                  },
                  d: {
                     fontSize: 16,
                     color: "#585858",
                     fontWeight: "bold",
                     align: "right"
                  }
               }
            }
         },
         // 关键代码========================
         labelLine: {
            normal: {
               show: true,
               length: 20,
               length2: 120,
               lineStyle: {
                  color: "#47A0FF"
               }
            }
         },
         emphasis: {
            itemStyle: {
               shadowBlur: 10,
               shadowOffsetX: 0,
               shadowColor: "rgba(0, 0, 0, 0.5)"
            }
         },
         data: data
      }
   ]
};