• echarts饼图


    data() {
        return {
          PartyActivity: "",
          imgsrc: require("../../../../assets/images/nodata.png")
        };
      }
    PartyActivityPie() {
          if (this.PartyActivity.length > 0) {
            let series = [];
            let legendData = [];
            let total;
            for (let i = 0; i < this.PartyActivity.length; i++) {
              series.push({
                name: this.PartyActivity[i].text,
                value: this.PartyActivity[i].count,
                totals: this.PartyActivity[i].total
              });
              total = this.PartyActivity[i].total;
              legendData.push(this.PartyActivity[i].text);
            }
            _document.getElementById("PartyActivity").innerHTML =
              '<div id="PartyActivityPie" style="100%;height:100%;"></div>';
            let myChart = echarts.init(
              _document.getElementById("PartyActivityPie")
            );
            let option = {
              title: {
                text: total,
                right: "73%",
                top: "43%",
                textStyle: {
                  //环形图内默认文字样式
                  fontSize: 20,
                  fontWeight: "bold",
                  color: "#333"
                }
              },
              tooltip: {
                //提示框,可以在全局也可以在
                trigger: "item", //提示框的样式
                formatter: "{a} <br/>{b}: {c} ({d}%)"
              },
              legend: {
                top: "middle",
                textStyle: {
                  fontSize: 14,
                  color: "#333"
                },
                x: "300px",
                y: "5px",
                orient: "vertical",
                data: legendData,
                formatter: function(name) {
                  let count = 0;
                  let totals = 0;
                  for (let i = 0; i < series.length; i++) {
                    if (series[i].name == name) {
                      count = series[i].value;
                      totals =
                        Math.floor((series[i].value / series[i].totals) * 100) +
                        "%";
                    }
                  }
                  return name + "  |  " + totals + "   |   " + count;
                }
              },
              series: [
                {
                  name: "党建活动",
                  type: "pie", //环形图的type和饼图相同
                  radius: ["50%", "70%"], //饼图的半径,第一个为内半径,第二个为外半径
                  center: ["25%", "47%"],
                  label: {
                    normal: {
                      show: false,
                      textStyle: {
                        baseline: "top",
                        fontSize: 12
                      }
                    }
                  },
                  color: ["#e57c00", "#6f9b94", "#6f8c9b", "#9b0b11"],
                  labelLine: {
                    normal: {
                      show: false
                    }
                  },
                  data: series
                }
              ]
            };
            myChart.setOption(option);
          } else {
            var html = '<div class="nodata"><img src=' + this.imgsrc + "></div>";
            _document.getElementById("PartyActivity").innerHTML = html;
         _document.getElementById('PartyActivity').removeAttribute('_echarts_instance_'); //echarts_instance_不能创建多个实例,所以需删除。否则无法显示有数据的界面。
        } 
    },

    如图:

  • 相关阅读:
    解决Extjs分页工具条Ext.PagingToolbar无法换页问题 子曰
    使用“动软代码生成器”需要注意的问题 子曰
    格式化extjs DateField 的值 子曰
    构造extjs两级联动comBox 子曰
    SQLServer数据库设计表和字段(转) 子曰
    extjs 中取值的方式 子曰
    extjs中的控件无法正常显示 子曰
    extjs表单中的下拉框(comobobox)手动添加空选项 子曰
    C++基础学习笔记
    dhl:弹出div层,可关闭可移动
  • 原文地址:https://www.cnblogs.com/yyjspace/p/11599056.html
Copyright © 2020-2023  润新知