echarts 饼状图 富文本设置 drawChart2

<template>
  <div style="height:100%">
    <div style="display:flex;width:100%; height:100%;">
      <div style="flex:1;width:100%; height:100%;">
        <div :id="myChartId" style="width:100%; height:100%;"></div>
      </div>
      <div style="flex:1">
        <div :id="myChartId2" style="width:100%; height:100%;"></div>
      </div>
    </div>
    <!-- <div class="viewBox leftBox">
      <el-row>
        <el-col :span="12">
          <div :id="myChartId" style="width:100%; height:100%;"></div>
        </el-col>
        <el-col :span="12">
          <div :id="myChartId2" style="width:100%; height:100%;"></div>
        </el-col>
      </el-row>
    </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import store from "@/store";
import { GETXXX } from "@/views/XXX/XX/X";

/**
 * 男女饼图、年龄段饼图
 */
export default {
  data() {
    return {
      title: "",
      deptId: 0,
      dataInfo: {
        nan: 0,
        nv: 0,
        age1: 0,
        age2: 0,
        age3: 0,
        age4: 0,
      },

      myChart: null,
      myChartId: "myChartId_" + Math.floor(Math.random() * 100),

      myChart2: null,
      myChartId2: "myChartId_" + Math.floor(Math.random() * 100),
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.dataInfo = {
        nan: 0,
        nv: 0,
        age1: 0,
        age2: 0,
        age3: 0,
        age4: 0,
      };

      var elements = document.getElementsByClassName("el-card__body");
      for (var i = 0; i < elements.length; i++) {
        elements[i].style.width = "100%";
        elements[i].style.height = "100%";
      }

      GETXXX(param).then((res) => {
        let data = res.data.data;
        this.dataInfo = data;
        //console.log(new Date().toLocaleString())
        //console.log(this.dataInfo)

        this.drawChart11();
        this.drawChart2();
        // setTimeout(()=>{
        //   this.drawChart2()
        // },500)
      });


    },

    drawChart1() {
      let that = this;
      if (!that.myChart) {
        that.myChart = echarts.init(document.getElementById(that.myChartId));
      }
      let option = {
        color: [
          "#00aced",
          "#ffab00",
          "#2bc38f",
          "#b0cd3b",
          "#dc6263",
          "#ba59ff",
          "#e6b9b8",
          "#b4b8ca",
          "#ffeada",
          "#8064a2",
        ],
        tooltip: {
          trigger: "item",
        },

        series: [
          {
            type: "pie",
            radius: "65%",
            // radius: [20, 60],
            center: ["50%", "50%"],
            selectedMode: "single",
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },

            data: [
              { value: 0, name: "男" },
              { value: 0, name: "女" },
            ],
          },
        ],
      };

      option.series[0].data[0]["value"] = that.dataInfo.nan;
      option.series[0].data[1]["value"] = that.dataInfo.nv;

      that.myChart.setOption(option);
    },

    drawChart2() {
      let that = this;
      if (!that.myChart2) {
        that.myChart2 = echarts.init(document.getElementById(that.myChartId2));
      }

      let option2 = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "18岁以下" },
              { value: 0, name: "18至60岁" },
              { value: 0, name: "60至80岁" },
              { value: 0, name: "80岁以上" },
            ],
            label: {
              // formatter: "{b}\n{c} ",
              // fontSize:13,
              // fontWeight:'bold'

              formatter: [
                '{a|{b}}',
                '{b|{c}}'
              ].join('\n'),

              // 这里是文本块的样式设置：
              // color: '#333',
              // fontSize: 5,
              // fontFamily: 'Arial',
              // borderWidth: 3,
              // backgroundColor: '#984455',
              // padding: [3, 10, 10, 5],
              // lineHeight: 20,

              // rich 里是文本片段的样式设置：
              rich: {
                a: {
                  fontSize: 11,
                  // color: 'red',
                  // lineHeight: 10
                },
                b: {
                  fontSize: 13,
                  fontWeight:'bold',
                  align:"center"
                },
                x: {
                  fontSize: 18,
                  fontFamily: 'Microsoft YaHei',
                  borderColor: '#449933',
                  borderRadius: 4,
                  backgroundColor: {
                    image: 'xxx/xxx.jpg'
                  },
                }
              }
            },

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option2.series[0].data[0]["value"] = that.dataInfo.age1;
      option2.series[0].data[1]["value"] = that.dataInfo.age2;
      option2.series[0].data[2]["value"] = that.dataInfo.age3;
      option2.series[0].data[3]["value"] = that.dataInfo.age4;

      that.myChart2.setOption(option2);
    },
    drawChart11() {
      let that = this;
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById(this.myChartId));
      }
      let option = {
        color: [
          "#00aced",
          "#ffab00",
          "#2bc38f",
          "#b0cd3b",
          "#dc6263",
          "#ba59ff",
          "#e6b9b8",
          "#b4b8ca",
          "#ffeada",
          "#8064a2",
        ],
        tooltip: {
          trigger: "item",
        },

        series: [
          {
            name: "",
            type: "pie",
            radius [20, 60],
			// radius: ["40%", "80%"],  内圈，外圈 百分比大小
            center: ["50%", "50%"],
            bottom: "15%",
            label: {
              formatter: "{b}\n{c} ",
              // fontSize:13,
              // fontWeight:'bold'
            },
            emphasis: {
              label: {
                show: true,
                // fontSize: "14",
                // fontWeight: 'bold'
              },
            },
            data: [
              { value: 2, name: "男" },
              { value: 1, name: "女" },
            ],
          },
        ],
      };

      option.series[0].data[0]["value"] = that.dataInfo.nan;
      option.series[0].data[1]["value"] = that.dataInfo.nv;

      this.myChart.setOption(option);
    },
    drawChart() {
      let that = this;
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById(this.myChartId));
      }
      let option = {
        color: [
          "#00aced",
          "#ffab00",
          "#2bc38f",
          "#b0cd3b",
          "#dc6263",
          "#ba59ff",
          "#e6b9b8",
          "#b4b8ca",
          "#ffeada",
          "#8064a2",
        ],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          x: "center",
          y: "bottom",
          itemWidth: 8, // 图例图形宽度
          itemHeight: 8,
          textStyle: {
            fontSize: "12px",
            color: "#9CBBEE",
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: [20, 60],
            center: ["50%", "50%"],
            bottom: "15%",
            itemStyle: {
              borderRadius: 1,
              borderColor: "rgb(2,4,21)",
              borderWidth: 1,
            },
            label: {
              alignTo: "edge",
              formatter: "{b}\n{c} " + this.suffix,
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 18,
              color: "#fff",
            },
            labelLine: {
              length: 5,
              length2: 0,
              maxSurfaceAngle: 80,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                // fontWeight: 'bold'
              },
            },
            data: [
              { value: 2, name: "男" },
              { value: 1, name: "女" },
            ],
          },
        ],
      };

      option.series[0].data[0]["value"] = that.dataInfo.nan;
      option.series[0].data[1]["value"] = that.dataInfo.nv;

      this.myChart.setOption(option);
    },
  },
};
</script>

<style>
.newslist .el-table__header-wrapper {
  display: none;
}
</style>