vue中使用echarts制作圆环图

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/liuxin_1991/article/details/81234636

<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>