echarts实现多环形图

最新推荐文章于 2025-05-26 09:27:42 发布

原创

最新推荐文章于 2025-05-26 09:27:42 发布 · 578 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

echarts实现多环形

效果如下

在这里插入图片描述

<section class="attack-stage-wrapper">
      <div id="test" class="attack-stage-map"></div>
      <ul class="attack-stage-context">
        <li class="attack-stage-items" v-for="(item, index) in viewPanel" :key="item.name">
          <div :class="['items-label__context', item.symbol]">{
   
   {
   
    item.name }}</div>
          <div class="items-label__extend">
            <span>{
   
   {
   
    GLOBAL.formatTheThousandths(item.value) }}</span>
          </div>
        </li>
      </ul>
    </section>

<script>
import echarts from 'echarts';
import {
   
    attackRatio } from '@/api/dashboard';
import tableLoading from '@/components/loading/loading';
export default {
   
   
  components: {
   
   
    tableLoading
  },
  data() {
   
   
    return {
   
   
      viewPanel: [
        {
   
    symbol: 'dmz', value: 0, name: '暴露面攻击' },
        {
   
    symbol: 'transferAttack', value: 0, name: '中转区攻击' },
        {
   
    symbol: 'crossOut', value: 0, name: '横向移动（外）' },
        {
   
    symbol: 'fallOut', value: 0, name: '失陷回连（外）' },
        {
   
    symbol: 'crossIn', value: 0, name: '横向移动（内）' },
        {
   
    symbol: 'fallIn', value: 0, name: '失陷回连（内）' }
      ],
      dmzData: 0,
      transferAttackData: 0,
      crossOutData: 0,
      fallOutData: 0,
      crossInData: 0,
      fallInData: 0,
      dataArr: []
    };
  },
  mounted() {
   
   
    /**
      * 暴露面：expose: dmz
        中转区：expose: transferAttack
        横向移动外：expose: crossOut
        失陷回连外：expose: fallOut
        横向移动内：expose: crossIn
        失陷回连内：expose: fallIn
      */
    const exposeList = ['dmz', 'transferAttack', 'crossOut', 'fallOut', 'crossIn', 'fallIn'];
    this.$nextTick(() => {
   
   
      exposeList.forEach(val => {
   
   
        this.getData(val)