echarts饼图

1、option配置项

computed: {
    pieOption() {
      let option = {
        graphic: [
          {
            type: 'image',
            left: 'center',
            top: 'center',
            style: {
              width: 150,
              height: 150,
            },
          },
        ],
        legend: {
          left: 'center',
          bottom: '1%',
          textStyle: {
            fontSize: 26,
            color: () => {}, 
          },
        },
        tooltip: {
          trigger: 'item',
        },
        label: {
          fontSize: 26,
        },
        series: [
          {
            radius: ['30%', '53%'],
            center: ['47%', '48%'],
            color: ['#44dbf7', '#ff9d00', '#e95a54', '#40c100', '#4474f1'],
            type: 'pie',
            itemStyle: {
              borderColor: '#201e18',
              borderWidth: 3,
            },
            label: {
              normal: {
                show: true,
                // formatter: "{c}%",
                formatter: function(params) {
                  return params.name + '\n\n' + params.value + '项'
                },
                textStyle: {
                  fontSize: 30,
                  color: '#ddbd97',
                },
                position: 'outside',
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 18,
                length2: 45,
                lineStyle: {
                  color: '#ddbd97',
                },
              },
              emphasis: {
                show: true,
              },
            },
            data: this.pieData,
          },
          {
            radius: ['30%', '34%'],
            center: ['47%', '48%'],
            type: 'pie',
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  color: 'rgba(250,250,250,0.3)',
                },
              },
            ],
          },
          {
            name: '外边框',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['47%', '48%'],
            radius: ['60%', '60%'],
            label: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 9,
                name: '',
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: '#73624e',
                  },
                },
              },
            ],
          },
          // {
          //   type: 'pie',
          //   // radius: ['48%', '92%'],
          //   radius: ['39%', '62%'],
          //   center:['49%', '52%'],
          //   color:['#3dc5d1', '#ee4e40', '#fbb321'],
          //   itemStyle: {
          //     borderColor: '#201f1d',
          //     borderWidth: 9,
          //   },
          //   data: this.pieData,
          //   labelLine:{
          //     show:false
          //   }
          // },
          // {
          //   type: 'pie',
          //   avoidLabelOverlap: true,  //避免标签重叠
          //   // radius: ['48%', '92%'],
          //   radius: ['39%', '62%'],
          //   center:['49%', '52%'],
          //   color:['#3dc5d1', '#ee4e40', '#fbb321'],
          //   itemStyle: {
          //     borderColor: '#201f1d',
          //     borderWidth: 9,
          //   },
          //   label: {
          //     show: true,
          //     position: 'inner',
          //     color:'#fff',
          //     fontSize: '24',
          //     formatter: '{d}%',
          //     fontWeight:'bold',
          //   },
          //   data: this.pieData,
          //   labelLine:{
          //     show:false
          //   }
          // }
        ],
      }
      return option
    },
    barOption() {
      let option = {
        graphic: [
          {
            type: 'image',
            left: 'center',
            top: 'center',
            style: {
              width: 150,
              height: 150,
            },
          },
        ],
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 18,
          },
        },
        legend: {
          bottom: '1%',
          textStyle: {
            fontSize: 26,
            color: () => {}, //使图例文字颜色和图例颜色对应的相同
          },
        },
        label: {
          fontSize: 26,
        },
        series: [
          {
            radius: ['30%', '53%'],
            center: ['52%', '48%'],
            color: ['#44dbf7', '#ff9d00', '#e95a54', '#40c100', '#4474f1'],
            type: 'pie',
            itemStyle: {
              borderColor: '#201e18',
              borderWidth: 3,
            },
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  return params.name + '\n\n' + params.value + '项'
                },
                textStyle: {
                  fontSize: 30,
                  color: '#ddbd97',
                },
                position: 'outside',
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 18,
                length2: 45,
                lineStyle: {
                  color: '#ddbd97',
                },
              },
              emphasis: {
                show: true,
              },
            },
            data: this.secondPieData,
          },
          {
            radius: ['30%', '34%'],
            center: ['52%', '48%'],
            type: 'pie',
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  color: 'rgba(250,250,250,0.3)',
                },
              },
            ],
          },
          {
            name: '外边框',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['52%', '48%'],
            radius: ['60%', '60%'],
            label: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 9,
                name: '',
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: '#73624e',
                  },
                },
              },
            ],
          },
          // {
          //   type: 'pie',
          //   radius: ['39%', '62%'],
          //   center:['49%', '50%'],
          //   itemStyle: {
          //     borderColor: '#201f1d',
          //     borderWidth: 9,
          //     normal:{
          //       color:function(params){
          //         if(params.name=='验收销号'){
          //           params.data.itemStyle={
          //             color : '#01e17e'
          //           }
          //         }else if(params.name=='按期进行'){
          //            params.data.itemStyle={
          //             color : '#fbb321'
          //           }
          //         }else{
          //            params.data.itemStyle={
          //             color : '#ee4e40'
          //           }
          //         }
          //       }
          //     }
          //   },
          //   data: this.secondPieData,
          //   labelLine:{
          //     show:false
          //   }
          // },
          // {
          //   type: 'pie',
          //   radius: ['39%', '62%'],
          //   center:['49%', '50%'],
          //   itemStyle: {
          //     borderColor: '#201f1d',
          //     borderWidth: 9,
          //     normal:{
          //       color:function(params){
          //         if(params.name=='验收销号'){
          //           params.data.itemStyle={
          //             color : '#01e17e'
          //           }
          //         }else if(params.name=='按期进行'){
          //            params.data.itemStyle={
          //             color : '#fbb321'
          //           }
          //         }else{
          //            params.data.itemStyle={
          //             color : '#ee4e40'
          //           }
          //         }
          //       }
          //     }
          //   },
          //   data: this.secondPieData,
          //   labelLine:{
          //     show:false
          //   },
          //   label: {
          //     show: true,
          //     position: 'inner',
          //     color:'#fff',
          //     fontSize: '24',
          //     formatter: '{d}%',
          //     fontWeight:'bold',
          //   },
          // },
        ],
        //以下是柱状图
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer:{
        //     type:'none'  //去掉鼠标悬浮时中间那条线
        //   }
        // },
        // grid:{
        //   left:'9%',
        //   // top:20,
        //   right:0,
        //   bottom:'6%',
        // },
        // xAxis:{
        //   type:'category',
        //   data: this.xAxisData,
        //   axisLabel:{
        //     color:'#988368',
        //     fontSize:30,
        //   },
        //   axisTick:{
        //     show:false
        //   },
        //   axisLine:{
        //     lineStyle:{
        //       color:"#9c8c7c",
        //       width:2
        //     }
        //   }
        // },
        // yAxis:{
        //   type:'value',
        //   splitNumber:5,
        //   splitLine:{
        //     show:true,
        //     lineStyle:{
        //       color:"#615b4b"
        //     }
        //   },
        //   axisLabel:{
        //     color:'#988368',
        //     fontSize:30,
        //   },
        //   axisTick:{
        //     show:false
        //   },
        //   axisLine:{
        //     lineStyle:{
        //       color:"#9c8c7c",
        //       width:2
        //     }
        //   }
        // },
        // label:{
        //   color:'#988368',
        //   fontSize:30
        // },
        // barWidth:47, //柱子宽度
        // series:[
        //   {
        //     name:'已完成',
        //     type:'bar',
        //     data:this.yAxisData1,
        //   },
        //   {
        //     name:'治理中',
        //     type:'bar',
        //     data:this.yAxisData2,
        //   },
        // ]
      }
      return option
    },
  },

2、使用computed配置项

 initPie() {
      let _this = this
      let myChart = this.$echarts.init(this.$refs.left_Pie)
      myChart.setOption(this.pieOption)
      
      myChart.off('click')
      myChart.on('click', function(value) {
        this.leftTypeName = value.name
        _this.getqueryImportantI(this.leftTypeName)
      })
    },

3、在接口获取数据后，调用initPie

 this.$nextTick(() => {
            this.initPie()
            this.initBar()
          })