echarts 南丁格尔玫瑰图，legend 图标分布两边，图标采用富文本自定义样式，图标自定义传参，每一模块自定义颜色

最新推荐文章于 2024-08-20 16:30:31 发布

陶甜也

最新推荐文章于 2024-08-20 16:30:31 发布

阅读量987

点赞数 2

分类专栏：实例文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/TTianYe/article/details/123913083

版权

实例专栏收录该内容

33 篇文章 1 订阅

订阅专栏

在这里插入图片描述
代码中主要部分option的配置

     let Data = [
      { value: 1048, name: "打桩机操作人员",people:"12.20" },
      { value: 900, name: "司索工",people:"15.20" },
      { value: 800, name: "架子工",people:"23.32" },
      { value: 724, name: "施工升降机司机",people:"53.6" },
      { value: 600, name: "电焊工",people:"3.2" },
      { value: 518, name: "人员1",people:"5.6" },
      { value: 418, name: "人员2",people:"6.9" },
      { value: 328, name: "人员3",people:"8.3" },
      { value: 208, name: "人员4" ,people:"74.36"},
      { value: 348, name: "人员5",people:"17.36" },
      { value: 448, name: "人员6",people:"65.36" },
      { value: 518, name: "人员7",people:"48.6" },
      { value: 628, name: "人员8",people:"65.36" },
      { value: 708, name: "人员9",people:"12.9" },
      { value: 848, name: "人员10",people:"8.3" },
      { value: 948, name: "人员11",people:"2.9" },
    ];
    let Datalength =Data.length;
    let leftnum =Math.floor(Datalength/2) ;
    // let rightnum =Math.ceil(Datalength - leftnum); 
    option = {
      tooltip: {
        trigger: "item",
      },
      legend: [
        {
          icon: "circle",
          data: Data.slice(0,leftnum),
          x: "left",
              bottom:"5%",
          orient: "vertical", 
          // itemWidth: 30,
        // itemHeight: 20,
        itemGap: 30,
          textStyle: {
            //图例文字的样式
            fontSize: 16,
            fontFamily: "微软雅黑",
            rich: {
              title: {
                height: 30,
                fontSize: 16,
                color: "#666",
              },
              num: {
                height: 30,
                fontSize: 20,
                color: "#333",
              },
              bfb: {
                height: 30,
                fontSize: 16,
                color: "#333",
              },
            },
          },
          formatter: function (name) {
            let itemvalue="";
            let itempeople = "";
           Data.forEach(item=>{
             if(item.name == name)
             {itemvalue = item.value;
               itempeople = item.people}
               
            })
            return (
              "{title| " + name + "}\n{num| " + itemvalue + "人}{bfb|/" + itempeople + "%}"
            );  
          },
        },
        {
          icon: "circle",
          data: Data.slice(leftnum, Datalength),
               bottom:"5%",
          x: "right",
          orient: "vertical",
        //   itemWidth: 30,
        // itemHeight: 20,
        itemGap: 30,
          textStyle: {
            //图例文字的样式
            // color: "#333",

            fontSize: 16,
            fontFamily: "微软雅黑",
            rich: {
              title: {
                height: 30,
                fontSize: 16,
                color: "#666",
              },
              num: {
                height: 30,
                fontSize: 20,
                color: "#333",
              },
              bfb: {
                height: 30,
                fontSize: 16,
                color: "#333",
              },
            },
          },
              formatter: function (name) {
            let itemvalue="";
            let itempeople = "";
           Data.forEach(item=>{
             if(item.name == name)
             {itemvalue = item.value;
               itempeople = item.people}
               
            })
            return (
              "{title| " + name + "}\n{num| " + itemvalue + "人}{bfb|/" + itempeople + "%}"
            );  
          },
          
        },
      ],

      series: [
        {
          roseType: "area",
          name: "特种人员",
          type: "pie",
          radius: ["30%", "99%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
            normal: {
              color: function (params) {
                //自定义颜色
                var colorList = [
                  "#2973AC",
                  "#2E8DD7",
                  "#078FF8",
                  "#439EF0",
                  "#5AB1FF",
                  "#6C7BF7", 
                  "#757CCD",
                  "#845BC2",
                  "#B19AD4",
                 "#CFC0DD",
                  "#A1A0DA", 
                 "#FFB264",
                  "#C8824E",
                  "#D56E22",
                  "#BF8630",
                  "#864622",
                 "#E58D04",
                  ];
                return colorList[params.dataIndex];
              },
            },
          },
          label: {
            normal: {
              show: true,
              position: "center",
              formatter: "{total|" + 4564 + "}",
              rich: {
                total: {
                  fontSize: 36,
                  fontFamily: "微软雅黑",
                  color: "#333",
                },
              },
            },
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "50",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: Data,
        },
      ],
    };