echarts饼图、环形图

一、饼图

const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: 10,
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 30,
            textStyle: {
              color: '#405B84'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          color: ['#68A0F7', '#64DEF3', '#40CE66', '#F87F4C'],
          series: [
            {
              name: '总数',
              type: 'pie',
              label: {
                color: '#405B84',
                formatter: '{b}: {d}%'
              },
              data: [
                {
                  value: 335,
                  name: '40分钟以上'
                },
                {
                  value: 234,
                  name: '35-40分钟'
                },
                {
                  value: 335,
                  name: '30-35分钟'
                },
                {
                  value: 1234,
                  name: '30分钟以下'
                }
              ],
              radius: '65%'
            }
          ]
        };

 二、环形图

const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: 10,
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 30,
                textStyle: {
                    color: '#405B84'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            color: ['#68A0F7', '#64DEF3', '#40CE66', '#F87F4C'],
            series: [
                {
                    name: '总数',
                    type: 'pie',
                    label: {
                        color: '#405B84',
                        formatter: '{b}: {d}%'
                    },
                    data: [
                        {
                            value: 335,
                            name: '优秀'
                        },
                        {
                            value: 234,
                            name: '良好'
                        },
                        {
                            value: 335,
                            name: '合格'
                        },
                        {
                            value: 1234,
                            name: '较差'
                        }
                    ],
                    radius: ['50%', '70%']
                }
            ]
        };

<template>
  <div
    :ref="`echartsComponent${random}`"
    :style="{ 'width': width, 'height': height }"
  >
  </div>
</template>

<script>
  import { createRandomId } from '@/util/util'
  export default {
    computed: {
      random: function () {
        return createRandomId()
      }
    },
    props: {
      width: {
        default: '100%',
        type: String
      },
      height: {
        default: '100%',
        type: String
      },
      data: {
        type: [Number, String],
        default: '0.3' // 数据
      },
      color: {
        type: Array,
        default: () => ['#489EF8', '#4771D8']
      }
    },
    data () {
      return {
        myChart: null,
        options: {
          title: {
            text: '30%',
            x: 'center',
            y: 'center',
            textStyle: {
              fontWeight: 'normal',
              color: 'white',
              fontSize: '12'
            }
          },
          tooltip: {
            show: false,
            trigger: 'item'
          },
          legend: {
            show: false,
            bottom: 10,
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 30,
            textStyle: {
              color: '#405B84'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          // color: ['#68A0F7', '#64DEF3', '#40CE66', '#F87F4C'],
          series: [
            {
              name: '总数',
              type: 'pie',
              label: {
                show: false,
                color: '#405B84',
                formatter: '{b}: {d}%'
              },
              data: [
                {
                  value: 335,
                  name: '完成率',
                  itemStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0,
                        color: '#489EF8'
                      }, {
                        offset: 1,
                        color: '#4771D8'
                      }]
                    }
                  }
                },
                {
                  value: 1,
                  name: '完成',
                  itemStyle: {
                    color: '#CCCCCC'
                  }
                }
              ],
              radius: ['60%', '80%']
            }
          ]
        }
      }
    },
    watch: {
      data (n, o) {
        if (n !== o) {
          this.initData()
        }
      }
    },
    mounted () {
      this.initData()
    },
    methods: {
      initData () {
        const _this = this
        // console.log(this.$echarts)
        this.$nextTick(() => {
          this.options.title.text = Number(this.data * 100).toFixed(2) + '%'
          this.options.series[0].data[0].value = Number(this.data)
          this.options.series[0].data[1].value = 1 - Number(this.data)
          this.options.series[0].data[0].itemStyle.color.colorStops[0].color = this.color[0]
          this.options.series[0].data[0].itemStyle.color.colorStops[1].color = this.color[1]
          this.myChart = this.$echarts.init(this.$refs[`echartsComponent${this.random}`])
          this.myChart.setOption(this.options)
          this.myChart.on('click', function (params) {
            _this.$emit('chartClick', params)
          })
        })
      },
      disposeCharts () {
        this.myChart.dispose()
      },
      resetData (data) {
        this.myChart.setOption(data)
      }

    }
  }
</script>

// 年龄分布
      initAgeChart () {
        const that = this
        const data = [
          {
            value: 335,
            name: '<20'
          },
          {
            value: 234,
            name: '20-30'
          },
          {
            value: 335,
            name: '30-40'
          },
          {
            value: 234,
            name: '40-50'
          },
          {
            value: 124,
            name: '50-60'
          }
        ]
        const option = {
          title: {
            text: '30%',
            x: 'center',
            y: 'center',
            textStyle: {
              fontWeight: 'normal',
              color: 'white',
              fontSize: '12'
            }
          },
          tooltip: {
            show: false,
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: 5,
            left: 250,
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 12,
            icon: 'circle',
            textStyle: {
              color: '#333',
              fontSize: 14,
              rich: {
                a: {
                  width: 60,
                  fontSize: 14
                }
              }
            },
            formatter: function (name) {
              const number = that.getPercentage(data, name)
              return "{a|" + name + "}" + number + "%"
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          color: ['#8932FF', '#8FC31F', '#FFAC2E', '#44E3FF', '#4F9AFF'],
          series: [
            {
              name: '地区分布',
              type: 'pie',
              label: {
                show: false,
                color: '#405B84',
                formatter: '{b}: {d}%'
              },
              data: data,
              radius: ['60%', '90%'],
              center: ['30%', '50%']
            }
          ]
        }
        this.$refs.ageChartRef.initData(option)
      },
      // 得到百分比
      getPercentage (data, name) {
        const target = data.find(item => item.name === name)
        let total = 0
        let percentage = 0
        data.forEach(item => {
          total += Number(item.value)
        })
        if (target) {
          percentage = (target.value / total).toFixed(2) * 100
        }
        return percentage
      }