echarts实现多环形图

于 2024-05-15 18:02:09 发布
阅读量222 收藏
点赞数 3
分类专栏： vue echarts 文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47673852/article/details/137970397
版权

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);
      });
    });
  },
  methods: {
    async getData(val) {
      const BarBOX1 = echarts.init(document.getElementById('test'));
      const res = await attackRatio(val);
      if (res.data.code === 200) {
        switch (val) {
          case 'dmz':
            this.dmzData = res.data.data;
            break;
          case 'transferAttack':
            this.transferAttackData = res.data.data;
            break;
          case 'crossOut':
            this.crossOutData = res.data.data;
            break;
          case 'fallOut':
            this.fallOutData = res.data.data;
            break;
          case 'crossIn':
            this.crossInData = res.data.data;
            break;
          case 'fallIn':
            this.fallInData = res.data.data;
            break;
        }
        const chartData = [
          { value: this.dmzData, name: '测试1', symbol: 'dmz' },
          { value: this.transferAttackData, name: '测试2', symbol: 'transferAttack' },
          { value: this.crossOutData, name: '测试3', symbol: 'crossOut' },
          { value: this.fallOutData, name: '测试4', symbol: 'fallOut' },
          { value: this.crossInData, name: '测试5', symbol: 'crossIn' },
          { value: this.fallInData, name: '测试6', symbol: 'fallIn' }
        ];
        this.viewPanel = chartData;
        const arrName = [];
        const arrValue = [];
        chartData.forEach((v, i) => {
          arrName.push(v.name);
          arrValue.push(v.value);
        });
        const placeItemStyle = {
          normal: {
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            color: '#FAFAFA',
            borderColor: '#FAFAFA',
            borderWidth: 2
          },
          emphasis: {
            color: '#FAFAFA',
            borderColor: '#FAFAFA',
            borderWidth: 2
          }
        };
        BarBOX1.setOption({
          // yAxis: {},
          backgroundColor: 'white',
          series: [
            {
              color: '#1890FF',
              name: '测试1',
              type: 'pie',
              radius: ['75%', '70%'],
              hoverAnimation: false, // 鼠标移入变大
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{
                value: this.dmzData,
                name: '测试1'
              },
              {
                value: 5,
                name: '',
                itemStyle: placeItemStyle
              }
              ]
            },
            {
              name: '测试2',
              type: 'pie',
              color: '#13C2C2',
              radius: ['65%', '60%'],
              hoverAnimation: false, // 鼠标移入变大
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },

              data: [{
                value: this.transferAttackData,
                name: '测试2'
              },
              {
                value: 5,
                name: '',
                itemStyle: placeItemStyle
              }
              ]
            },
            {
              name: '测试3',
              type: 'pie',
              color: '#2FC25B',
              radius: ['55%', '50%'],
              hoverAnimation: false, // 鼠标移入变大
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },

              data: [{
                value: this.crossOutData,
                name: '测试3'
              },
              {
                value: 5,
                name: '',
                itemStyle: placeItemStyle
              }
              ]
            },
            {
              name: '测试4',
              type: 'pie',
              color: '#FB65B7',
              radius: ['45%', '40%'],
              hoverAnimation: false, // 鼠标移入变大
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },

              data: [{
                value: this.fallOutData,
                name: '测试4'
              },
              {
                value: 5,
                name: '',
                itemStyle: placeItemStyle
              }
              ]
            },
            {
              name: '测试5',
              type: 'pie',
              color: '#FF9700',
              radius: ['35%', '30%'],
              hoverAnimation: false, // 鼠标移入变大
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },

              data: [{
                value: this.crossInData,
                name: '测试5'
              },
              {
                value: 5,
                name: '',
                itemStyle: placeItemStyle
              }
              ]
            },
            {
              name: '测试6',
              type: 'pie',
              color: '#F9D236',
              radius: ['25%', '20%'],
              hoverAnimation: false, // 鼠标移入变大
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },

              data: [{
                value: this.fallInData,
                name: '测试6'
              },
              {
                value: 5,
                name: '',
                itemStyle: placeItemStyle
              }
              ]
            }
          
          ]
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.attack-stage-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 400px;
  height: 320px;
  .attack-stage-map{
    width: 280px;
    height: 280px;
  }
  .attack-stage-context{
    font-size: 14px;
    color: #919398;
  }
  .attack-stage-items{
    display: flex;
    align-items: center;
    height: 24px;
    margin-bottom: 8px;
    width: 190px;
    overflow: hidden;
    .items-label__context{
      flex: 1;
      font-size: 14px;
      color: #919398;
      padding-left: 16px;
      position: relative;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      &::before{
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -4px;
        background-color: #1890FF;
      }
      &.dmz{
        &::before{
          background-color: #1890FF;
        }
      }
      &.transferAttack{
        &::before{
          background-color: #13C2C2;
        }
      }
      &.crossOut{
        &::before{
          background-color: #2FC25B;
        }
      }
      &.fallOut{
        &::before{
          background-color: #FB65B7;
        }
      }
      &.crossIn{
        &::before{
          background-color: #FF9700;
        }
      }
      &.fallIn{
        &::before{
          background-color: #F9D236;
        }
      }
    }
    .items-label__extend{
      text-align: right;
      font-size: 14px;
      color: #303133;
    }
  }
}
</style>
~想不出名字~
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts 三环圆环_echarts实现环形图
weixin_42501688的博客
12-24 1287
//来自一个大佬的恩赐var pass_rate = 70,average = 60,total = 100;option = {tooltip: {show:false,trigger: 'item',formatter: "{a} : {c} ({d}%)"},// color: ['#85b6b2', '#6d4f8d'],color: ['rgb(255,159,127)', 'rgb(...
echarts饼图实现多环形对比图
热门推荐
木雷双雄7
09-25 1万+
要求：展示室外温度、室内温度设定点、室内温度的多环形对比图 最终实现效果图： 代码实现详解： var total = 50;//最大温度数据单独出来定义，方便环形总数的修改 var myChart = echarts.init(document.getElementById('pie'); placeHolderStyle = {
echarts实现多层环图（复制粘贴即可）
蜗牛~~
07-31 2711
【代码】echarts实现多层环图（复制粘贴即可）
【Echarts】echarts多层圆环图详细配置代码
做笔记/记录遇到的前端bug
10-09 3523
vue项目使用echars圆环图，多层圆环图，详细配置，拿来直接用
echarts实现多重环形图
qq_34004088的博客
01-22 5361
let echarts = require('echarts'); var BorderWidth = '10'; //反方向剩下部分的样式 var placeHolderStyle = { normal: { label: { show: false, position: "outside" ...
echarts绘制嵌套环形图(南丁格尔玫瑰图)
Lorrey_的博客
05-17 4452
根据专业总人数和学院总人数绘制嵌套环形图 首先，echarts的基本步骤 引入js，准备容器，初始化实例， <script src="lib/echarts.min.js"></script> <style> .box{ width: 900px; height: 500px; background-color:#BBFFFF; } </style> <
echarts vue 动态实现多个环形图 显示不同颜色
mumu123abc的博客
12-13 3818
vue echarts 循环数据动态生成多个环形图，显示不同颜色
echarts实现地图以及半圆图表
04-15
在这个主题中，我们将深入探讨如何使用ECharts实现地图和半圆图表。 一、ECharts地图可视化 ECharts地图组件允许开发者将地理数据映射到地图上，提供多种地图类型，包括中国省份地图、世界地图等，并支持自定义...
使用echarts实现关系图
09-02
总结来说，使用ECharts实现关系图，主要涉及ECharts库的引入、数据准备、配置项设置、图表初始化和更新等步骤。ECharts提供的强大功能和灵活性，使得创建复杂且交互性强的关系图变得简单易行。通过不断实践和调整，...
echart 3D环形图 动画效果
12-18
在ECharts中，我们可以通过`series`中的`type`属性设置为`pie`或`funnel`（漏斗图）来创建环形图，然后通过调整相关的配置项实现3D效果。 首先，我们需要在HTML文件中引入ECharts的库文件，例如`zhuan.html`可能...
Echarts饼图4.0（3D环形图、包含透明效果）
06-09
Echarts饼图4.0（3D环形图、包含透明效果）
echarts实现3D环装饼图带引导线效果
01-25
**ECharts实现3D环状饼图带引导线效果** ECharts是一款由百度开发的开源JavaScript图表库，它提供丰富的可视化图表类型，适用于各种数据可视化需求。在本项目中，我们将探讨如何使用ECharts实现一个3D环状饼图，并...
echarts 多环形图
最新发布
qqqqqqqq188的专栏
04-11 321
【代码】echarts 多环形图。
echarts 多圆环图表
BDawn的专栏
11-02 1795
option如下 vue代码 const d = [ {value: 348, name: '内部人员'}, {value: 735, name: '外部人员'} ] const colors = ['#cfc100', '#1091ca'] const colors2 = ['#fff000', '#11b6ff'] const el = this.$refs.bgry_chart as HTMLElement const width = el.offsetWidth const myEchart .
vue echarts 动态生成多圆环饼图
wyh_115的博客
09-03 2651
在做数据可视化的时候，会遇到写多圆环饼图，因为数据的变化，封装时series的数据就不能写死。下面做一个简单的多圆环饼图疯转 动态生成series // 动态生成serie getSeries(){ var series=[] var serItem={} this.names.forEach((item,index)=>{ serItem={} serItem={ name:item.name,
用echarts来实现多重环形图
浩星
03-14 9462
老规矩先看效果： 然后就是贴代码啦： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;echarts.js案例一&lt;/title&gt; &lt;script type=&quo
echarts实现多圆环嵌套
qq_37942884的博客
06-28 3836
这里写自定义目录标题echarts实现多圆环嵌套基本思路代码结尾 echarts实现多圆环嵌套 先贴效果图，或许有些初用echarts的小伙伴用得到，分享一下实现方法 基本思路 实现多圆形嵌套的基本思路就是利用echarts的环形图“pie”，在series配置多个圆环，圆环的大小百分比不一样从而实现圆环嵌套效果，多的不说，直接上代码 代码 let data1 = [ { value: 1000, name: '全部工单' }, { value: 500, name: '服
echarts圆环进度条效果
前端很忙
12-30 4669
圆形进度条效果
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值