Echarts 特殊环形图展示

简介: 需求:将环形图内环分为两类集团内部和集团外部,外环的数据分别属于内环的两类,我这里为了方便只简单写了两类,大家可以对数据进行更改变成多类,我这里样式比较简陋粗糙大家可自行更改
学习过程中将笔记跟大家分享,希望对大家也有所帮助,共同成长进步💪~
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~

需求:将环形图内环分为两类集团内部和集团外部,外环的数据分别属于内环的两类,我这里为了方便只简单写了两类,大家可以对数据进行更改变成多类,我这里样式比较简陋粗糙大家可自行更改

效果图:

image.png

代码如下:

mychart() {
    var myChart = echarts.init(document.getElementById('profitTotal1'));
    let colors = [{
        one: "red",
        two: "pink",
    }, {
        one: "#F6F68C",
        two: "#FC8F3E",
    }];
    let colors2 = ['red','pink','#F6F68C','#FC8F3E'];
    var Data = [
      [
        { value: [100], name: '集团内部' },
        { value: '30', name: '已付金额' },
        { value: '70', name: '未付金额' },

      ],
      [
        { value: [100], name: '集团外部' },
        { value: '12', name: '已付金额' },
        { value: '88', name: '未付金额' },
      ],
    ];
    var BigData = [];//州
    var SmallData = [];//国家
    var Radius = [];
    var ZRadius = [];
    for (var prop in Data) {
      BigData.push(Data[prop][0]);
      for (var i = 1; i < Data[prop].length; i++) {
        SmallData.push(Data[prop][i]);
      }
    }
    option = {
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          name: '州',
          type: 'pie',
          radius: ['10%', '66%'],
          data: BigData,
          label: {
            position: 'inside',
            fontSize: 12,
            formatter: function (e) {
              return e.data.name + ':' + e.data.value[0];
            },
          },
          itemStyle: {
              borderColor: '#ffffff',
              borderWidth: 2,
              normal: {
                  color: function (params) {
                      let odd = params.dataIndex % 2;
                      return {
                          type: "linear",
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                              offset: 0,
                              color: colors[odd].one // 0% 处的颜色
                          },
                          {
                              offset: 1,
                              color: colors[odd].two // 100% 处的颜色
                          }
                          ]
                      }
                  },
              }
          },
        },
        {
          name: '国家',
          type: 'pie',
          radius: ['70%', '100%'],
          data: SmallData,
          label: {
            // position: 'inside',
            formatter: function (e) {
              return e.data.name + ':' + e.data.value[0];
            },
          },
          itemStyle: {
              borderColor: '#ffffff',
              borderWidth: 2,
              normal: {
                  color: function (params) {
                      let index = params.dataIndex;
                      return {
                          type: "linear",
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                              offset: 0,
                              color: colors2[index] // 0% 处的颜色
                          },
                          {
                              offset: 1,
                              color: colors2[index] // 100% 处的颜色
                          }
                          ]
                      }
                  },
              }
          },
        },
      ],
    };
    myChart.setOption(option);
},
具体效果可以复制到本地尝试和调整自己想要的结果
最后谢谢大家阅读⭐️⭐️⭐️,如果喜欢,可以点赞或留言哟💕
目录
相关文章
|
7月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
131 0
echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个
|
6月前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
254 0
 ECharts 雷达图案例001-自定义节点动画
|
6月前
|
数据可视化 黑灰产治理
📊 ECharts 雷达图案例002 - 诈骗性质分析
**ECharts 案例展示了诈骗性质的雷达图分析,以创新可视化揭示诈骗模式。定制化雷达图配色鲜明,多维度剖析不同诈骗手段,如网络刷单、冒充公检法。交互式设计允许用户深入探究细节。[点击这里](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454384)查看完整案例。#ECharts #数据可视化 #雷达图 #诈骗分析**
62 0
📊 ECharts 雷达图案例002 - 诈骗性质分析
|
5月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
434 0
|
7月前
eCharts实现漏斗图
eCharts实现漏斗图
222 0
eCharts实现漏斗图
|
JSON 数据格式
echarts关系图
echarts关系图
77 0
Echarts饼图之-玫瑰图数据交互
Echarts饼图之-玫瑰图数据交互
114 0
|
JSON 数据格式
Echarts的饼状图变成环形图
Echarts的饼状图变成环形图
54 0
Echarts去掉叠堆折线区域图的区域颜色
Echarts去掉叠堆折线区域图的区域颜色
130 0

热门文章

最新文章