cpdm_manage/src/components/BingChart2.vue

<template>
  <div class="pie-chart-content">
    <div ref="myPieChart" :id="chartId" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "pieChart",
  components: {},
  props: {
    options: {
      type: Array,
      default: function () {
        return [];
      },
    },
    chartId: {
      type: String,
      default: "",
    },
    chartName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      color: ["#FCEF9A", "#D54039", "#56743E", "#FF917C"],
      pieData: [],
    };
  },
  // mounted() {
  //   this.myPieEcharts(this.options);
  // },
  computed: {},
  watch: {
    options() {
      this.myPieEcharts(this.options);
    },
  },
  methods: {
    myPieEcharts(pieData) {

      let myChart = this.$echarts.init(document.getElementById(this.chartId));
      let option = {
        title: {
          text: ``,
        
          left: "center",
          top:'0px',
          textStyle: {
              fontSize: 16,
              color: "#000000",
           
              foontWeight: "600",
            },
        },
        // tooltip: {
        //   trigger: "item",
        tooltip: {
          trigger: "item",
          formatter:function(params){
            let val = params.marker+params.name+'<br/>'+params.value+'人';
            return val
          }
        },
        // },
   
        series: [
          {
            name: ``,
            type: "pie",
            radius: "70%",
            // label:{
            //   show:true,
            //   position:'inner',//将文字显示在行内
            //   textStyle:{ 
            //     fontSize:20,//设置图内显示文字的大小
            //     color:'#ffffff'//设置饼状图文字的颜色
            //   }
            // },
            label:{
              show:true,
              position:'outside',//将文字显示在行内
              textStyle:{ 
                fontSize:16,//设置图内显示文字的大小
                color:'#000000'//设置饼状图文字的颜色
              }
            },
            //
            // name:100-parseInt(pieData[0].value/(pieData[0].value+ pieData[1].value)*100)   + "%"+pieData[1].name,itemStyle:{color:'#FFAE00'
            //pieData[0].value  :1
            data: [
              { value: (pieData[0].value==0||pieData[1].value==0)?1:pieData[0].value-pieData[1].value, name:pieData[0].value==0||pieData[1].value==0?'100%心理健康': (100-pieData[1].value/(pieData[0].value)*100).toFixed(2)  +'%心理健康',itemStyle:{color:'#5470C6',fontSize:'20'}},
              { value:pieData[1].value, name:(pieData[0].value==0||pieData[1].value==0)?'0%中重度焦虑':(pieData[1].value/(pieData[0].value)*100).toFixed(2)   + "%"+pieData[1].name,itemStyle:{color:'#FFAE00',fontSize:'20'}},
            ],
          },
        ],
      };
      pieData && option && myChart.setOption(option);
        myChart.resize();
    },
    pieDataHandle(param) {
      this.pieData = [];

      // param.groupData.map((item,index) => {
      //
      //   this.lineData.push({
      //     type: 'line',
      //     name: item.name,
      //     data: item.value,
      //   });
      //
      // });
      //
      // this.myLineEcharts(param.category,this.lineData);
    },
  },
};
</script>

<style scoped>
.pie-chart-content {
  width: 100%;
  /* height: 100%; */
}
</style>