利用Echarts实现图例显示百分比效果

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

效果图

主要代码

全部代码

secondChart = () => {
	//datas的数据是接口拿到的数据
    const { texture } = this.state;
    const datas = texture;
    var option = {
      color: [
        "#3774e5",
        "#4ea9d9",
        "#b041ef",
        "#a25fea",
        "#1b50b3",
        "#8a40ef",
        "#5a8be8",
      ],
      legend: {
        selectedMode: false, // 取消图例上的点击事件
        type: "plain",
        icon: "square",
        orient: "vertical",
        left: "55%",
        top: "0",
        align: "left",
        itemGap: 4,
        itemWidth: 10, // 设置宽度
        itemHeight: 10, // 设置高度
        symbolKeepAspect: false,
        textStyle: {
          rich: {
            name: {
              verticalAlign: "right",
              align: "left",
              width: 75,
              fontSize: 12,
            },
            value: {
              align: "left",
              width: 35,
              fontSize: 12,
            },
            count: {
              align: "left",
              width: 20,
              fontSize: 12,
            },
            upRate: {
              align: "left",
              fontSize: 12,
              color: "#54bef9",
            },
            downRate: {
              align: "left",
              fontSize: 12,
              color: "#54bef9",
            },
          },
          color: "#54bef9",
        },
        data: datas.map((item) => item.name),
        formatter: function (name) {
          var total = 0;
          var tarValue;
          for (var i = 0; i < datas.length; i++) {
            total += datas[i].value;
            if (name === datas[i].name) {
              tarValue = datas[i].value;
            }
          }
          var p = Math.round((tarValue / total) * 100);
          return "{name| " + name + "}  " + "{value| " + p + "%}";
        },
      },
      series: [
        {
          name: "数量",
          type: "pie",
          hoverAnimation: false,
          clockwise: false,
          radius: ["45%", "70%"],
          center: ["30%", "50%"],
          data: datas,
          itemStyle: {
            normal: {
              borderColor: "#021336",
              borderWidth: 4,
            },
          },
          label: {
            normal: {
              show: false,
              position: "center",
              formatter: "{text|{c}}\n{b}",
              rich: {
                text: {
                  align: "center",
                  verticalAlign: "middle",
                  padding: 8,
                  fontSize: 12,
                },
                value: {
                  align: "center",
                  verticalAlign: "middle",
                  fontSize: 12,
                },
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "12",
              },
            },
          },
          labelLine: {
            normal: {
              show: true,
            },
          },
        },
      ],
    };
    this.Chart_init2 = echarts.init(this.Chart_dom2.current);
    this.Chart_init2.setOption(option);
  };

到此这篇关于利用Echarts实现图例显示百分比效果的文章就介绍到这了,更多相关Echarts图例显示百分比内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉