echarts pie饼图的使用（初级版包括设置百分比）

2022.12.07今天我学习了如何简单通过echarts做一个pie饼图。

 

<template>
  <div ref="Pie" style="width:100%;height: 100%;position: absolute;z-index: 999;"></div>
</template>
<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {}
  },

  mounted() {
    this.pieEcharts()
  },
  methods: {
    pieEcharts() {
      this.chart = this.$echarts.init(this.$refs.Pie);
      this.chart.setOption({

        tooltip: {
          show: true
        },

        // 设置字体的样式
        textStyle: {
          fontSize: 15,
          fontWeight: "bolder",

        },

        legend: {

          data: ['糖尿病', '甲状腺', '肥胖症', '骨质疏松症'],

          // 设置item按钮的整体宽度大小
          width: "100%",
          top:'80px',
          // 设置item按钮的水平和重置安放位置
          // x:'left',
          // y:'center',

          // 设置Item按钮的宽
          // itemHeight设置高
          itemWidth:20,

          textStyle: {
            color: 'white'
          },

          // 设置item按钮的间隔
          itemGap:30,

          // 设置item按钮的背景颜色
          // backgroundColor:"#00e",

          //   按钮样式为圆形
          icon: "circle",
        },

        // 可视化的工具箱
        toolbox: {
          show: true,
        },

        series: [{
          name: '疾病',
          top:'70px',
          // 内圆和外园的比例
          radius: ["0", "260"],
          itemStyle: {
            // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
            emphasis: {
              shadowBlur: 100,
              shadowOffsetX: 20,
              shadowColor: "black"
            },
          },

          // 设置value比例

          type: 'pie',

          data: [
            {
              name: '甲状腺',
              value: 5000,
              label: {
                normal: {
                  show: true,
             //    position:'inner'在图表内部显示
                  position:'inner',
                  formatter: ' b:{d}%' //自定义显示格式(b:name, c:value, d:百分比)
                }
              }
            },
            {
              name: '肥胖症',
              value: 6600,
              label: {
                normal: {
                  show: true,
          //    position:'inner'在图表内部显示
                  position:'inner',
                  formatter: 'b: {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                }
              }
            },
            {
              name: '骨质疏松症',
              value: 3000,
              label: {
                normal: {
                  show: true,
          //    position:'inner'在图表内部显示
                  position:'inner',
                  formatter: 'b: {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                }
              }
            },
            {
              name: '糖尿病',
              value: 7800,
              label: {
                normal: {
                  show: true,
          //    position:'inner'在图表内部显示
                  position:'inner',
                  formatter: 'b: {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                }
              }
            }
          ]
        }]
      })
    }
  },
  mixins: [echartMixins]
}
</script>
<style>

</style>