环状图,三种渐变

<template>
  <div :style="{width: width, height: height}" ref="donutChart"></div>
</template>

<script>
const echarts = require('echarts');
export default {
  name: "donutChart",
  data(){
    return{
      chart:null,//图表实例
    }
  },
  props:{
    width:{
      type:String,
      default:'100%'
    },
    height:{
      type:String,
      default:'100%'
    },

    seriesColor:{
      type:Array,
      default(){
        return ['#1B243C','#0D92F7']
      }
    },
    optionType:{
      type:Number,
      default:1
    },
    seriesData:{
      type:Array,
      default(){
        return []
      }
    },
    legendData:{
      type:Array,
      default(){
        return []
      }
    },
    arr:{
      type:Array,
      default(){
        return []
      }
    },
    txt:{
      type:String,
      default:'普通教室'
    }

  },
  watch: {
    /* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
    chartData: {
      deep: true,
      handler(val) {
        val && this.chart.setOption(val)
      }
    }
  },
  mounted() {

    /* 图表初始化 */
    this.$nextTick(() => {
      this.init()
    })
  },

  methods: {
    init() {
      //2.初始化
      this.chart = echarts.init(this.$refs.donutChart);
      //3.配置数据
      //配置1
      let that=this
      let a = {
        title: {
          // text: "80%",
          left: "center",
          top: "45%",
          textStyle: {
            color: "#fff",
            fontSize: 22,
            align: "center",
            fontWeight: '400'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            // minAngle: 10, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            radius: ['60%', '70%'],
            // roseType: 'area', //所有圆心角相同，仅通过半径展示数据大小
            // data: this.seriesData,
            // color: this.seriesColor,
            label:{
              position:'center',
              show:true,
              formatter:() => {
                let str=that.arr[0]+'\n'+that.txt
                return str
              },
              color:'#fff',
              lineHeight:20,
              fontSize:14
            },
            labelLine: {  //删除指示线
              show: false
            },
            itemStyle:{
              show:false,
              // borderColor:'#ffffff',
              // borderWidth:1,
            },

            data:[
              {
                value:that.arr[0],
                name:'完成',
                itemStyle:{
                  normal:{
                    color:new echarts.graphic.LinearGradient(
                        1,1,1,0,[
                          {offset:0,color:'rgba(24, 144, 255, 1)'},
                          {offset:0.5,color:'rgba(27, 189, 243, 1)'},
                          {offset:1,color:'rgba(30, 231, 231, 1)'}
                        ]
                    )
                  }
                }
              },
              {
                value:that.arr[1],
                name:'wei完成',
                itemStyle: {
                  normal: {
                    color:'#1B243C'
                  }
                }

              }
            ]
          },
          // {
          //   name: '外边框',
          //   type: 'pie',
          //   hoverAnimation: false,
          //   center: ['50%', '50%'], //外圈位置
          //   radius: ['52%', '52%'], //内边距
          //   data: [{
          //     value: 9,
          //     name: '',
          //     itemStyle: {
          //       normal: {
          //         borderWidth: 60,
          //         borderColor: 'rgba(255,255,255,0.1)'
          //       }
          //     }
          //   }],
          //   labelLine: {  //删除指示线
          //     show: false
          //   }
          // }
        ]
      };
      //配置2
      let b = {
        tooltip: {    //鼠标悬浮标题
          trigger: 'item',
          backgroundColor: '#fff',
          textStyle: {
            color: 'rgba(51,51,51,0.95)',
          }
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom', //文字位置
          textStyle: {
            color: '#fff'
          },
          itemGap: 40,   //下方文字间距
          itemHeight: 6,
          itemWidth: 6,
          // data: [
          //   {
          //     name: '讲授',
          //     icon: 'circle',
          //   },
          //   {
          //     name: '互动',
          //     icon: 'circle',
          //   },
          //   {
          //     name: '其他',
          //     icon: 'circle',
          //   }
          // ]
          data:this.legendData
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '65%'],
            // roseType: 'area', //所有圆心角相同，仅通过半径展示数据大小
            label: {
              show: false,
            },
            // data: [
            //   {value: 300, name: '讲授', icon: 'circle'},
            //   {value: 748, name: '互动', icon: 'circle'},
            //   {value: 596, name: '其他', icon: 'circle'},
            // ],
            data:this.seriesData,
            color: ['#4AC2FC', '#6967E4', '#63D64C'],
            labelLine: {  //删除指示线
              show: false
            }
          },
          {
            name: '外边框',
            type: 'pie',
            hoverAnimation: false,
            center: ['50%', '50%'], //外圈位置
            radius: ['74%', '74%'], //内边距
            data: [{
              value: 9,
              name: '',
              itemStyle: {
                normal: {
                  borderType: 'dashed',
                  borderWidth: 1,
                  borderColor: 'rgba(24,144,255,0.51)'
                }
              }
            }],
            labelLine: {  //删除指示线
              show: false
            }
          }
        ]
      };
      let option= this.optionType==1 ? a:b;
      // 4.传入数据
      this.chart.setOption(option);
    }
  }
}
</script>

<style scoped>

</style>