vue中使用echarts制作圆环图的实例代码


            vue使用echarts制作圆环图，代码如下所示：





<div id="main"></div>

<script type="text/ecmascript-6">

 export default {

  //从父组件中接收到的数据

  props:{

   chartT:{

    type:Object,

    required:true

   }

  },

  data () {

   return {

    charts: '',

    totalIncome:'',

    opinionData: [

     {value: Math.abs(this.chartT.imp_rate)},//取绝对值

     {value: 100}

    ]

   }

  },

  methods: {

   drawPie (id) {

    this.charts = this.$echarts.init(document.getElementById(id));

    this.charts.setOption({

     tooltip: {

      trigger: 'item',

      formatter: '{a}<br/>{b}:{c} ({d}%)'

     },

     legend: {

      orient: 'vertical',

      x: 'left',

      data: this.opinion

     },

     color:['#2872ef','#d6d6d6','#fc6e51'],

     series: [

      {

       name: '访问来源',

       type: 'pie',

       radius: ['90%', '65%'],

       avoidLabelOverlap: false,

       label: {

        normal: {

         show: false,

         position: 'center'

        },

        emphasis: {

         show: true,

         testStyle: {

          fontSize: '30',

          fontWeight: 'bold'

         }

        }

       },

       //根据数值判断颜色

//       itemStyle:{

//        normal:{

//         color:function(params){

//          console.log(params)

//          console.log(params.dataIndex)

//          console.log(params.data.value)

//          console.log(params.value)

//          if(params.value > 0){

//           return "#2872ef";

//          }else if(params.value[0] < 0 ){

//           return "#fc6e51";

//          }

//          return "#d6d6d6";

//         }

//        }

//       },

       labelLine: {

        normal: {

         show: false

        }

       },

       data: this.opinionData

      }

     ]

    })

   }

  },

  mounted () {

   this.$nextTick(function () {

    this.drawPie('main')

   })

  },

 }

</script>



父组件传值给子组件





<template>

  <div class="index-wrapper">

   <tittle :chartT="chart_tit"></tittle>

  </div>

</template>

<script type="text/ecmascript-6">

 import axios from 'axios'

 import Tittle from './applicationDetail/appTittle'

 export default {

  data(){

   return{

    chart_tit:{}

   }

  }

}

</script>



总结



以上所述是小编给大家介绍的vue中使用echarts制作圆环图的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！