饼图数据案例,主要是formatter函数的使用

      pieOption: {

        legend: {

          selectedMode: false, //取消图例上的点击事件

          orient: "vertical",

          // icon: "circle",

          itemWidth: 15,

          itemHeight: 15, //图例圆点的高度

          x: "45%",

          y: "0px",

          right: "0px",

          top: "center",

          formatter: (name) => {

            console.log(name, "打印一下name");

            let data = this.pieOption.series[0].data;

            let total = 0;

             let tarValue;

            for (let i = 0; i < data.length; i++) {

              total += data[i].value;

              if (data[i].name == name) {

                tarValue = data[i].value;

              }

            }

             let p = Math.round((tarValue / total) * 100) + '%'  

            return `${name} ${p} ${tarValue}`;

          },

          // formatter:"{a}:{b}",

          textStyle: {

            rich: {

              a: {

                fontSize: 12,

                color: "#333",

                padding: 1, //图例上下的间距

              },

            },

          },

        },

        series: [

          {

            type: "pie",

            radius: ["20", "50"],

            center: ["20%", "50%"],

            label: {

              show: false, //树枝提示文字

            },

            data: [

              {

                value: 263,

                name: "运转类",

                itemStyle: { color: "#60BB68" },

              },

              {

                value: 263,

                name: "收运类",

                itemStyle: { color: "#F15379" },

              },

              {

                value: 263,

                name: "除雪类",

                itemStyle: { color: "#FF7F49" },

              },

              {

                value: 263,

                name: "邀检类",

                itemStyle: { color: "#8BD0FF" },

              },

              {

                value: 263,

                name: "清洗类",

                itemStyle: { color: "#4880FF" },

              },

              {

                value: 263,

                name: "清扫类",

                itemStyle: { color: "#5761B7" },

              },

            ],

          },

        ],

      },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值