9、vue echarts环形百分比统计图且内容渐变色

vue echarts环形百分比且渐变色

组件界面circleStatistic2.vue

<template>
  <div style="height:100%;width:100%;">
    <div id="myCharted" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    // 从引用页面传入的数据
    item: {
      typeof: Object,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      console.log(this.item)
      // 数据处理
      const changeHealthData = this.item
      const decimal = changeHealthData.processed / (changeHealthData.untreated + changeHealthData.processed)
      const percentage = Math.round(100 * decimal)
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('myCharted'))
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          textStyle: {
            fontSize: 36
          }
        },
        title: {
          text: percentage + '%',
          left: 'center',
          top: 81.5,
          textStyle: {
            fontSize: 36,
            color: '#ffffff'
          }
        },
        // 设置不需要的部分的颜色
        color: ['rgba(255, 255, 255, 0.2)'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: changeHealthData.processed,
                name: '直接访问',
                itemStyle: {
                  normal: {
                    // 渐变色设置
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: '#ff6fb7'
                      },
                      {
                        offset: decimal,
                        color: '#2555db'
                      }
                    ])
                  }
                }
              },
              {
                value: changeHealthData.untreated,
                name: '邮件营销'
              }
            ]
          }
        ]
      })
      window.onresize = myChart.resize
    }
  }
}
</script>
<style lang="less" scoped>
</style>

引用页面（传入参数）

<template>
// 传入参数item
    <div class="total">
    // 引用页面
      <circleStatisticaVue :item="item"></circleStatisticaVue>
    </div>
</template>

<script>
import circleStatistic2Vue from '../echartsComponent/circleStatistic2.vue'

export default {
  name: 'totalUser',
  data () {
    return {
      item: {
        processed: 190,
        untreated: 120
      }
    }
  },
  components: {
  // 作为组件
    circleStatistic2Vue
   }
}
</script>

<style>
// 记得设置父元素的长宽
.total {
    font-family: DIN;
    font-size: 68px;
    font-weight: bolder;
    letter-spacing: 2px;
    padding: 10px 0;
    height: 200px;
    width: 100%;
  }
</style>