tdzcxx-frontend/src/views/tj/compoent/PieData.vue

<template>
  <div ref="main" style="width:calc(100% - 0px) ;height:300px;"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: 'index',
  data() {
    return {

    }
  },
  props:{
    resultData: {
      type: Array,
      default:()=> [
        { name: '出让', value: 332312.43 },
        { name: '划拨', value: 573988.58},
        { name: '作价出资', value: 279083.13},
        { name: '转让', value: 2119.85 },
       ]
    },
    titleText:{
      type:String,
    }
  },
  watch:{
    resultData(){
      this.$nextTick(function() {
        this.getPie()
      })
    }
  },
  methods: {
    getPie() {
      var _this = this
      // 绘制图表
      var myChart = echarts.init(this.$refs.main)
      myChart.on('click',(params)=>{
        _this.$emit('visible',{syqsyfs:params.data.name,sfsb:"3"});
        console.log(4567,params)
      })
      // 指定图表的配置项和数据
      var option = {
        //标题
        title: {
          text: this.titleText,
          x: 'left' ,              //标题位置
          textStyle: { //标题内容的样式
            color: '#000',

            fontSize: 18 //主题文字字体大小，默认为18px
          },
        },

        // stillShowZeroSum: true,
        //鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{c} ({d}%)'
        },
        //图例
        legend: {//图例  标注各种颜色代表的模块
          // orient: 'vertical',//图例的显示方式  默认横向显示
          type:'scroll', //图例滚动效果
          bottom: 10,//控制图例出现的距离  默认左上角
          // itemWidth: 16,//图例颜色块的宽度和高度
          // itemHeight: 12,
          textStyle: {//图例中文字的样式
            color: '#000',
            fontSize: 13
          },
          // data: ['出让', '划拨', '作价出资','授权经营','转让','其他']//图例上显示的饼图各模块上的名字
        },
        //饼图中各模块的颜色
        color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],
        // 饼图数据
        series: {
          // name: 'bug分布',
          type: 'pie',             //echarts图的类型   pie代表饼图
          radius: '50%',           //饼图中饼状部分的大小所占整个父元素的百分比
          center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
          // data:''               //饼图数据
          data: this.resultData,
          label:{
            normal : {
              formatter: '{b}:\n({d}%)',
              textStyle : {
                fontWeight : 'normal',
                fontSize : 13
              }
            }
          },
          itemStyle: {
            normal: {
              label: {
                show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
              },
              labelLine: {
                show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
              }
            }
          },
        }

      }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      myChart.resize();

    }
  }
}
</script>

<style scoped>

</style>