vue echarts之饼图

飞熊 • 2023年8月9日下午4:12 • 技术随笔 • 阅读 256

上一篇搞了个仪表盘，这一篇搞个饼图

无图言d，所以，展示：

直接上代码：

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
  name: 'TestChart',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  created () {
    this.$nextTick(()=> {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      let eVal = 40
      this.chart = echarts.init(this.$el, 'macarons') // 引用echarts自定义主题
      this.chart.setOption({
        title: {
          text: 'xx使用率',
          textStyle: {
            fontSize: 16,
            top: '10%',
            left: '20%'
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: false
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          show: false
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ["45%", "50%"],  // 饼图半径，内半径和外半径
            //center: ["30%", "70%"],  // 调整饼图位置
            avoidLabelOverlap: true,   //启用防止标签重叠
            hoverAnimation: false,    //开启放大动画
            label: {  // 饼图图形上的文本标签
              normal: { // normal是图形在默认状态下的样式
                show: false,  // 不显示label
                position: "center",   //文字居中显示
                formatter: "{d}% \r\n {b}"  //显示文本内容，d代表百分比，b代表name文本
              },
              // emphasis: {
              //   show: true,
              // },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: eVal,
                name: "利用率",
                label: {
                  show: true,
                },
                itemStyle: {
                  color: "#DC143C",
                }
              },
              {
                value: 100 - eVal,
                name: "",
                itemStyle: {
                  color: "#D3D3D3",
                },
              },
            ],
          }
        ]
      })
    }
  },
}
</script>

<style scoped>

</style>