crm_front_v3/src/views/custom_manage/etaTrial/compontents/questionChart.vue

<template>
	<div class="pie-chart" ref="pieChart" style="height: 100%;width: 100%;"></div>
</template>

<script>

  export default {
    name:"questionChart",
    props:{
      chartData:{
        required:true,
        type:Array
      }
    },
    data() {
      return {
        options: {
          tooltip: {
            trigger: 'item',
            formatter:'{b0}：{c0}%'
          },
          legend: {
            bottom: '5%',
            left: 'center',
            icon:'circle'
          },
          series: [
            {
              type: 'pie',
              center: ['50%', '40%'],
              radius: ['45%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 2
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data:[]
            },
          ],
          color: ["#0F80E7",'#61DCF3','#60E184','#7A4DDA','#F7E701','#34C8A4','#FFBB37','#E241EE','#FF9559','#FF8CE9',
            '#FF5BAA','#E75300','#B8ED75','#3AEBC0','#A1F8FF','#03FFD2','#A56FF8','#F0960E','#2CB2EC','#63B0FF'], 
          
        },
        chartData:[{value:1,name:'A'},{value:4,name:'B'},{value:5,name:'C'}]
      }
    },

    methods:{
      drawChart() {
        const chart = this.$refs.pieChart;
        if (chart) {
          const myChart = echarts.init(chart);
          this.options.series[0].data = this.chartData
          myChart.setOption(this.options);
          // '禁止'点击图例后的默认行为
          myChart.on('legendselectchanged', ({ selected, name }) => {
            selected[name] = true
            myChart.setOption({ legend: { selected } })
          })
          window.addEventListener('resize', function () {
            myChart.resize();
          });
          this.$on('hook:destroyed', () => {
            window.removeEventListener('resize', function () {
              myChart.resize();
            });
          });
        }
      },
    },
    mounted() {
      this.drawChart();
    },
  }
</script>

<style lang="scss" scoped>

</style>