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_不能创建多个实例,所以需删除。否则无法显示有数据的界面。
    } },

    如图:

  • 相关阅读:
    centos 安装docker
    vsphere client 创建虚拟机 如何关联到本地iso文件
    在centos7中使用supermin制作centos6.5docker镜像
    centos安装后,连接不上网络,yum命令执行can not find a valid baseurl for repo: base/7/x86-64
    佛祖保佑,永无BUG
    框架原理
    android 中解析XML的方法(转)
    android 项目随记一
    android事件系列-onTouch事件与手势操作
    深入理解 AngularJS 的 Scope(转)
  • 原文地址:https://www.cnblogs.com/yyjspace/p/11599064.html
Copyright © 2011-2022 走看看