echarts圆套圆

<template>
  <div class="setPosition">
    <div class="pie_warp">
      <h2>{{title}}</h2>
      <div id="myChart" v-if="dataSetArr"></div>
      <p>
        当日已处理单量:
        <span>{{dealData.already}}</span> 件
      </p>
      <p>
        当日预计剩余单量:
        <span>{{dealData.untreated}}</span> 件
      </p>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'pieCom',
  props: {
    title: {
      // 标题
      type: String,
      default: '南宁转运中心'
    },
    dataSetArr: {
      // echarts数据
      type: Array,
      default: () => {
        return [
          {
            name: '名称1',
            value: 20
          },
          {
            name: '名称2',
            value: 15
          },
          {
            name: '名称3',
            value: 50
          },
          {
            name: '名称4',
            value: 20
          },
          {
            name: '名称5',
            value: 20
          }
        ]
      }
    },
    dealData: {
      type: Object,
      default: () => {
        return {
          already: 178273,
          untreated: 102342
        }
      }
    }
  },
  data () {
    return {
      myChart: null,
      currName: '',
      colors: ['#0ECEFF', '#0566E8', '#F25C5D', '#F3961C', '#907AFF']
    }
  },
  computed: {
    themeColor () {
      return this.$store.getters.themeColor
    }
  },
  mounted () {
    if (this.dataSetArr) {
      this.drawPie()
    }
  },
  methods: {
    drawPie () {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('myChart'))
      let myChart = this.myChart
      myChart.on('mouseover', params => {
        this.currName = params.name
        let op = myChart.getOption()
        if (params.seriesIndex === 0) {
          let _label = {
            normal: {
              show: true,
              position: 'center',
              formatter: [`{b|${params.percent + '%'}}`].join('\n'),
              rich: {
                b: {
                  color: this.themeColor === 'light' ? 'blue' : '#fff',
                  fontSize: 12,
                  foneWeight: 'bold'
                }
              }
            }
          }
          op.series[1].label = _label
          myChart.setOption(op, true)
        }
      })
      let itemCol = this.colors
      let centerData = this._getCenterData()
      let option = {
        color: this.colors,
        tooltip: {
          show: true,
          backgroundColor: 'rgba(3,43,80,0.7)',
          textStyle: {
            color: 'rgba(255,255,255,0.7)',
            fontSize: 12
          },
          extraCssText: 'text-align:left',
          formatter: function (params, m) {
            let item = `<span style="display:inline-block;margin-right:3px;border-radius:10px;width:9px;height:9px;background-color:${
              itemCol[params.dataIndex]
            };"></span>`
            let str = `${item} ${params.name}&nbsp;${params.value}`
            return str
          }
        },
        series: [
          {
            name: 'pie',
            type: 'pie',
            hoverAnimation: true,
            center: ['50%', '50%'], // 饼图的圆心坐标
            radius: ['40%', '60%'], // 饼图大小
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: 'outside',
              formatter: function (params) {
                let nm = params.name
                return [`{a|${nm}}\n`]
              },
              rich: {
                a: {
                  color: this.themeColor === 'light' ? '#333' : '#fff',
                  fontSize: 12,
                  lineHeight: 10
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 12,
                length2: 8
              }
            },
            data: this.dataSetArr
          },
          {
            name: '内框',
            type: 'pie',
            hoverAnimation: false,
            center: ['50%', '50%'], // 饼图的圆心坐标
            radius: ['30%', '30%'], // 饼图大小
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: [`{b|${centerData[0].value + '%'}}`].join('\n'),
                rich: {
                  b: {
                    color: this.themeColor === 'light' ? 'blue' : '#fff',
                    fontSize: 12,
                    foneWeight: 'bold'
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                // color: "red",
                borderWidth: 1,
                borderColor: this.themeColor === 'light' ? '#fff' : '#0C1D38'
              }
            },
            data: [
              {
                value: 100,
                tooltip: {
                  show: false
                }
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    _getCenterData () {
      let dtS = this._dySum()
      if (this.currName !== '') {
        return (
          dtS &&
          dtS.filter(item => {
            return item.name === this.currName
          })
        )
      } else {
        return [dtS && dtS[0]]
      }
    },
    _dySum () {
      let dySum = 0
      let arr = []
      this.dataSetArr.map(item => {
        dySum += Number(item.value)
      })
      this.dataSetArr &&
        this.dataSetArr.map(item => {
          let val = ((Number(item.value) / dySum) * 100).toFixed(0)
          arr.push({
            name: item.name,
            value: val
          })
        })
      return arr
    },
    setColor () {
      this.myChart.setOption({
        series: [
          {
            label: {
              rich: {
                a: {
                  color: this.themeColor === 'light' ? '#666' : '#fff'
                }
              }
            }
          },
          {
            label: {
              rich: {
                b: {
                  color: this.themeColor === 'light' ? 'blue' : '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: this.themeColor === 'light' ? '#fff' : '#0C1D38'
              }
            }
          }
        ]
      })
    }
  },
  watch: {
    themeColor (newVal) {
      this.setColor()
    }
  }
}
</script>

<style lang="less" scoped>
.setPosition {
  //这里改位置
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#myChart {
  width: 234px;
  height: 110px;
}
.themeRowLine (@bo,@txt1,@txt2) {
  .pie_warp {
    width: 234px;
    height: auto;
    position: relative;
    top: 30px;
    right: 0px;
    background-color: @bo;
    border: #ffd5d5d5 solid 1px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    &::before {
      box-sizing: content-box;
      width: 0px;
      height: 0px;
      position: absolute;
      bottom: -16px;
      right: 0;
      left: 0;
      margin: auto;
      padding: 0;
      border-bottom: 8px solid transparent;
      border-top: 8px solid #fff;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      display: block;
      content: "";
      z-index: 12;
    }
    &::after {
      box-sizing: content-box;
      width: 0px;
      height: 0px;
      position: absolute;
      bottom: -18px;
      right: 0;
      left: 0;
      margin: auto;
      padding: 0;
      border-bottom: 9px solid transparent;
      border-top: 9px solid #ffd5d5d5;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      display: block;
      content: "";
      z-index: 10;
    }
    h2 {
      font-size: 14px;
      color: @txt1;
      font-weight: bold;
      text-align: center;
      padding-top: 9px;
      padding-bottom: 9px;
    }
    p {
      font-size: 14px;
      color: @txt2;
      font-weight: 400;
      padding-bottom: 9px;
      padding-left: 20px;
      padding-right: 20px;
    }
    span {
      color: #ff7a04;
      display: inline-block;
      max-width: 55px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      vertical-align: bottom;
    }
  }
}

.light {
  .themeRowLine(@lpiebg, @txt3, @txt14);
}
.dark {
  .themeRowLine(@dpiebg, @Dtxt6, @Dtxt6);
}
</style>