Echarts 多环形效果样式

echarts yekong 220℃

Echarts 多环形效果样式

<template>
  <div class="echarts1">
    <div class="echarts2" ref="echarts">
    </div>
    <div class="echarts3">
      <div class="echarts3item">
        <span class="l">省外</span>
        <span class="r">20.9%</span>
      </div>
      <div class="echarts3item">
        <span class="l">省内</span>
        <span class="r">8.4%</span>
      </div>
      <div class="echarts3item">
        <span class="l">入境</span>
        <span class="r">9.1%</span>
      </div>
    </div>
  </div>
</template>

<script>

import { FontChart } from '../../utils/utils'
import { getDeclareNum } from '@/api/api/zixun'

export default {
  name: 'echarts1',
  components: {},
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      status: '',
      xdata1: [],
      xdata2: [],
      ydata: []
    }
  },
  watch: {},
  mounted () {
    this.drawLine()
  },
  methods: {
    getData () {
      var that = this
      getDeclareNum().then(
        (response) => {
          console.log(response)
          that.xdata1 = []
          that.xdata2 = []
          that.xdata1.push(response.result.a.sessionNum)
          that.xdata1.push(response.result.b.sessionNum)
          that.xdata1.push(response.result.c.sessionNum)
          that.xdata1.push(response.result.d.sessionNum)
          that.xdata2.push(response.result.a.priceSum)
          that.xdata2.push(response.result.b.priceSum)
          that.xdata2.push(response.result.c.priceSum)
          that.xdata2.push(response.result.d.priceSum)
          this.drawLine()
        }
      )
    },
    drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)

      function Pie () {
        let dataArr = []
        for (var i = 0; i < 150; i++) {
          if (i % 2 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 25,
              itemStyle: {
                normal: {
                  color: 'rgba(255,255,255,0.2)',
                  borderWidth: 0,
                  borderColor: 'rgba(0,0,0,0)'
                }
              }
            })
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 10,
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0)',
                  borderWidth: 0,
                  borderColor: 'rgba(0,0,0,0)'
                }
              }
            })
          }
        }
        return dataArr
      }

      const dataList = [
        {
          value: 75,
          show: true,
          name: '省外',
          itemStyle: {
            normal: {
              color: 'rgba(7, 225, 131, 1)',
              borderWidth: 2,
              borderColor: '#0633CA'
            }
          }
        },
        {
          value: 63,
          show: true,
          name: '省内',
          itemStyle: {
            normal: {
              color: 'rgba(103, 223, 255, 1)',
              borderWidth: 2,
              borderColor: '#0633CA'
            }
          },
        },
        {
          value: 43,
          show: true,
          name: '入境',
          itemStyle: {
            normal: {
              color: 'rgba(0, 192, 255, 1)',
              borderWidth: 2,
              borderColor: '#0633CA'
            }
          }
        },
      ]
      var option = {
        series: [
          {
            name: '入住',
            type: 'pie',
            radius: ['85%', '95%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: dataList
          },
          {
            type: 'pie',
            zlevel: 0,
            silent: true,
            center: ['50%', '50%'],
            radius: ['99%', '100%'],
            z: 10,
            itemStyle: {
              normal: {
                areaColor: 'rgba(137, 137, 137, .3)',
                borderColor: '#4053CC',
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: Pie()
          },
          {
            type: 'pie',
            zlevel: 0,
            silent: true,
            center: ['50%', '50%'],
            radius: ['69%', '70%'],
            z: 10,
            itemStyle: {
              normal: {
                areaColor: 'rgba(137, 137, 137, .3)',
                borderColor: '#4053CC',
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: Pie()
          },
          {
            type: 'pie',
            name: '饼状背景',
            radius: ['0%', '50%'],
            center: ['50%', '50%'],
            startAngle: 110,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                  offset: 0,
                  color: 'rgba(255,255,255,0.05)'
                },
                  {
                    offset: 0.5,
                    color: 'rgba(255,255,255,0.2)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0.1)'
                  }
                ], false),
              }
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false
            },
            data: [50]
          },
        ]
      }

      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 60%;
  height: calc(100% - 50px);
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

.echarts2 {
  position: relative;
  width: 50%;
  height: calc(100% - 20px);
  margin-top: -20px;
}

.wcl {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  font-size: 14px;
  font-family: PingFang;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: -10px;
}

.echarts3 {
  width: 50%;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;

  .echarts3item {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    margin-bottom: 5px;
    margin-top: 5px;

    span.l {
      width: 86px;
      height: 20px;
      border: 1px solid #5B6BD2;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      font-size: 13px;
      text-indent: 10px;
      font-family: PingFang;
      font-weight: 500;
      color: #FFFFFF;
    }

    span.r {
      width: 75px;
      height: 20px;
      background: #07E183;
      padding-right: 10px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #FFFFFF;
    }
  }

  .echarts3item:nth-child(2) {
    span.r {
      background: rgba(103, 223, 255, 1);
    }
  }

  .echarts3item:nth-child(3) {
    span.r {
      background: rgba(0, 192, 255, 1);
    }
  }
}
</style>

喜欢 (0)