快捷導(dǎo)航

利用Echarts實現(xiàn)圖例顯示百分比效果

更新時間：2022年03月17日 14:30:50 作者：Ciao_Traveler

EChart開源來自百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊，基于html5?Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart實現(xiàn)圖例中顯示百分比的效果，感興趣的可以學(xué)習(xí)一下

效果圖

主要代碼

全部代碼

secondChart = () => {
	//datas的數(shù)據(jù)是接口拿到的數(shù)據(jù)
    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, // 設(shè)置寬度
        itemHeight: 10, // 設(shè)置高度
        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: "數(shù)量",
          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",
              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);
  };

到此這篇關(guān)于利用Echarts實現(xiàn)圖例顯示百分比效果的文章就介紹到這了,更多相關(guān)Echarts圖例顯示百分比內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: