饼图

image.png

如下
main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

<div id="myChart_1" class="largeChart" />
<div id="myChart_2" class="largeChart" />
<div id="myChart_3" class="largeChart" />

  mounted() {
    this.getChart()
  },
  methods: {
    getChart() {
      const myChart1 = this.$echarts.init(document.getElementById('myChart_1'))
      var colorList = ['#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
      const data = [
        { value: 335, name: '义务兵' },
        { value: 310, name: '干部' },
        { value: 274, name: '士官' }
      ]
      const option = {
      // 悬浮展示
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        // 底部小圆点
        legend: {
          left: 'center',
          bottom: '10',
          icon: 'circle',
          textStyle: {
            color: '#fff'
          },
          data: data.map(item => item.name)
        },
        series: [
          {
            type: 'pie',
            // 玫瑰图
            roseType: 'radius',
            radius: '50%',
            center: ['50%', '40%'],
            data: data,
            // 饼图线上字的颜色
            // label: {
            //   color: '#fff'
            // },
            // 饼图线的颜色
            // labelLine: {
            //   lineStyle: {
            //     color: 'rgba(255, 255, 255, 0.3)'
            //   },
            //   smooth: 0.2,
            //   length: 10,
            //   length2: 20
            // },
            // 饼图本身颜色
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut'
          }
        ]
      }
      myChart1.setOption(option)

      const myChart2 = this.$echarts.init(document.getElementById('myChart_2'))
      const option2 = {
      // 悬浮展示
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        // 底部小圆点
        legend: {
          left: 'center',
          bottom: '10',
          icon: 'roundRect',
          textStyle: {
            color: '#fff'
          },
          data: data.map(item => item.name)
        },
        // 中心字
        graphic: {
          type: 'text',
          left: 'center',
          top: '35%',
          style: {
            text: '9999',
            textAlign: 'center',
            fill: '#fff',
            fontSize: 20
          }
        },
        series: [
          {
            type: 'pie',
            // 玫瑰图
            radius: ['43%', '60%'],
            center: ['50%', '40%'],
            data: data,
            // 饼图线上字的颜色
            // label: {
            //   color: '#fff'
            // },
            // 饼图线的颜色
            // labelLine: {
            //   lineStyle: {
            //     color: 'rgba(255, 255, 255, 0.3)'
            //   },
            //   smooth: 0.2,
            //   length: 10,
            //   length2: 20
            // },
            // 饼图本身颜色
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut'
          }
        ]
      }
      myChart2.setOption(option2)

      const myChart3 = this.$echarts.init(document.getElementById('myChart_3'))
      const option3 = {
      // 悬浮展示
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        // 底部小圆点
        legend: {
          left: 'center',
          bottom: '10',
          icon: 'circle',
          textStyle: {
            color: '#fff'
          },
          data: data.map(item => item.name)
        },
        series: [
          {
            type: 'pie',
            // 玫瑰图
            radius: ['5%', '60%'],
            center: ['50%', '40%'],
            data: data,
            // 饼图线上字的颜色
            label: {
              formatter: '{d}%'
            // formatter: ['10%', '10%', '10%']
              //   color: '#fff'
            },
            // 饼图线的颜色
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0)'
              },
              smooth: 0.2,
              length: 10,
              length2: 15
            },
            // 饼图本身颜色
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut'
          }
        ]
      }
      myChart3.setOption(option3)
    }
  }