echarts-pie

最新推荐文章于 2024-09-11 22:31:16 发布

FourteenSeptember

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量82

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/wozouludaifeng/article/details/120965998

版权

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<template>
  <div id="QualityRating">

  </div>
</template>

<script>
import echarts from 'echarts'
  export default {
    data() {
      return {
        COLORS:['#5B8FF9','#5AD8A6','#F7C739','#44D3E1','#E8684A','#A953F3']
      }
    },
    mounted () {
      let list = [
        {
          itemStyle:{color:'#5B8FF9'},
          value:0,
          name:'信用极差0-649分'
        },
        {
          itemStyle:{color:'#5AD8A6'},
          value:500,
          name:'信用较差650-849分'
        },
        {
          itemStyle:{color:'#F7C739'},
          value:600,
          name:'信用中等850-1049分'
        },
        {
          itemStyle:{color:'#44D3E1'},
          value:800,
          name:'信用良好1050-1249分'
        },
        {
          itemStyle:{color:'#E8684A'},
          value:900,
          name:'信用优秀1250-1449分'
        },
        {
          itemStyle:{color:'#A953F3'},
          value:1000,
          name:'信用极好1450-2000分'
        }
      ]
      this.getCredit(list)
    },
    methods: {
      getCredit(data){
        let mydpc = echarts.init(document.getElementById('QualityRating'))
        mydpc.setOption({
          grid: {
            show: false,
            top: '20%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}元'
          },
          legend: {
            selectedMode: false,
            orient: 'vertical',
            top: 'middle',
            right: '0%',
            height: 'auto',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 12,
              color: '#BABABA'
            },
            data: data.map(v=>v.name)
          },
          series: [
            {
              name: "信用等级",
              type: "pie",
              radius: "90%",
              center: ["30%", "50%"],
              label: {
                normal: {
                  formatter: "{c}",
                  position: "inner",
                  show: true,
                  color: "#fff",
                },
              },

              data: data,
              roseType: "radius",
              animationType: "scale",
              animationEasing: "elasticOut",
              animationDelay: function () {
                return Math.random() * 200;
              },
            },
          ],
          // series: [
          //   {
          //     name: '',
          //     type: 'pie',
          //     radius: ['50%', '75%'],
          //     center: ["30%", "50%"],
          //     hoverAnimation: false,
          //     label: {
          //       show:false,
          //       position: 'outside',
          //       color: 'red',
          //       borderColor: '#333',
          //       formatter: '{b}  \n {c}',
          //     },
          //     data: data,
          //     emphasis: {
          //       itemStyle: {
          //         shadowBlur: 10,
          //         shadowOffsetX: 0,
          //         shadowColor: 'rgba(0, 0, 0, 0.5)'
          //       }
          //     }
          //   }
          // ]
        })
      },
    },
    
  }
</script>

<style lang="stylus" scoped>
#QualityRating{
  width: 100%;
  height: 100%;
}
</style>```