zoukankan      html  css  js  c++  java
  • echarts多饼图

    propertiesPie() {
          if (this.Properties.length > 0) {
            _document.getElementById("properties").innerHTML =
              '<div id="propertiesPie" style="100%;height:100%;"></div>';
            let series = this.Properties;
            let myChart = echarts.init(_document.getElementById("propertiesPie"));
    
            let option = {
              title: [],
              color: ["#bf61d4", "#03a9f4", "#2fc25b", "#fbc02d"],
              tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              series: []
            };
    
            for (let i = 0; i < series.length; i++) {
              option.title[i] = {
                text: "{pp|" + series[i].text + "}",
                left: (i + 1) * 19 - 4 + "%",
                y: "10%",
                textStyle: {
                  fontSize: 15,
                  rich: {
                    pp: {
                      fontWeight: "bold",
                      fontSize: 15,
                       "9",
                      align: "center"
                    }
                  }
                },
                // textAlign:"left",
                subtext: "{pp|" + series[i].count + "}",
                itemGap: 200,
                subtextStyle: {
                  fontSize: 15,
                  color: "black",
                  verticalAlign: "bottom",
                  rich: {
                    pp: {
                      fontSize: 15,
                      fontWeight: "bold",
                       "9",
                      align: "center"
                    }
                  }
                }
              };
              option.series[i] = {
                name: "党员分布",
                type: "pie",
                center: [(i + 1) * 19 + "%", "50%"],
                radius: [40, 55],
                // x: i * 20 + '%', // for funnel
                label: {
                  normal: {
                    formatter: function(params) {
                      return params.percent + "%";
                    }
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  {
                    name: series[i].text,
                    value: series[i].count,
                    label: {
                      normal: {
                        position: "center",
                        fontSize: 15,
                        fontWeight: "bold"
                      }
                    }
                  },
                  {
                    name: "",
                    value: series[i].total - series[i].count,
                    label: {
                      normal: {
                        show: false
                      }
                    },
                    itemStyle: {
                      normal: {
                        color: "#ccc"
                      }
                    }
                  }
                ]
              };
            }
            myChart.setOption(option);
          } else {
            var html = '<div class="nodata"><img src=' + require("../../../../assets/images/nodata.png") + "></div>";
            _document.getElementById("properties").innerHTML = html;
    _document.getElementById('properties').removeAttribute('_echarts_instance_'); //echarts_instance_不能创建多个实例,所以需删除。否则无法显示有数据的界面。
    } },

    如图:

  • 相关阅读:
    036 Python进阶小结
    035 异常处理
    033 数据类型分类
    034 Python深浅拷贝
    032 集合类型内置方法
    031 字典类型内置方法
    XML删除节点
    追加XML
    XML文档的读、写
    XML文档的创建
  • 原文地址:https://www.cnblogs.com/yyjspace/p/11599064.html
Copyright © 2011-2022 走看看