echarts环形图多个title

示例: 

 let datas = [
        {
          name: "提高卫生标注",
          value: 100,
        },
        {
          name: "加强安全教育",
          value: 40,
        },
        {
          name: "规范仪容仪表",
          value: 50,
        },
        {
          name: "提升言谈举止",
          value: 30,
        },
          {
          name: "增强服务意识",
          value: 30,
        },
      ];

      var option = {
           grid: {
        x: '30%',
        y: '3',
        x2: '5%',
        y2: '5%',
        borderWidth: 1,
        borderColor: '#f0f0f0',
    },
          title: [
        {
            show: true,
            text: '{a|设备状态}{b|数量}{c|占比}',
            // text: '{b|数量}{c|占比}',
            top: '40%',
            left: '80%',
            textStyle: {
              
                rich: {
                    a: {
                        align: 'center',
                        fontSize: 14,
                        width: 20,
                         color: 'black',
                        fontWeight:'bolder',
                        padding: [0, 0, 0, 20],
                    },
                    b: {
                        align: 'center',
                        fontSize: 14,
                        color: 'black',
                        fontWeight:'bolder',
                        width: 5,
                        padding: [0, 0, 0, 60],
                    },
                    c: {
                        align: 'center',
                        fontSize: 14,
                        width: 5,
                         fontWeight:'bolder',
                        color: 'black',
                        padding: [0, 0, 0, 45],
                    },
                },
            },
        },
        
    ],
        // color: ["#F56463", "#00C6FF", "#F09615", "#0079E6"],
        legend: {
          // itemHeight: 14,
          // itemWidth: 14,
          // icon: "rect",
          orient: "vertical",
          top: "center",
          right: "5%",
          textStyle: {
            align: "left",
            color: "#",
            verticalAlign: "middle",
            rich: {
              name: {
                width:150, 
                fontSize: 16,
              },
              value: {  
                width:20,  
                   align:"right",
                fontFamily: "Medium",
                fontSize: 16,
              },
              rate: {width:10,
                align:"right",
                fontSize: 16,
              },
            },
          },
          data: datas,
          // formatter: (name) => {
          //   if (datas.length) {
          //     const item = datas.filter((item) => item.name === name)[0];
          //     console.log(datas)
          //     return `{name|${name}}{value| ${item.value}   {rate| }`;
          //     // return `{name|${name}:}{value| ${item.value}} {rate| ${item.value}%}`;
          //   }
          // },
             formatter:function(name){
	        	var oa = option.series[0].data;
	        	var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
	        	for(var i = 0; i < option.series[0].data.length; i++){
                    if(name==oa[i].name){
                    	return name + '     ' + oa[i].value + '个   ' + (oa[i].value/num * 100).toFixed(2) + '%';
                    }
	        	}
	        }
        },
        // tooltip: {
        //   trigger: "item",
        //   // formatter: "{d}%",
        // },
            tooltip: {
        trigger: 'item',
        formatter: function(parms) {
            var str =
            // parms.name + "</br>" +
                parms.marker + "" + parms.data.name + "</br>" +
                "数量:" + parms.data.value +  "个"+"</br>" +
                "占比:" + parms.percent + "%";
            return str;
        }
    },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["35%", "50%"],
            // roseType: "radius",
            label: {
               normal: {
                show: false,
               },
              formatter: "{d}%",
            },
            data: datas,
          },
        ],
      };

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值