请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

@Martin.Zhang
超级版主   /  发表于:2024-2-4 15:26  /   查看:128  /  回复:0
本帖最后由 @Martin.Zhang 于 2024-2-4 15:27 编辑

显示效果:
image.png679718322.png
实现步骤:
1.使用Echarts图表
image.png612948913.png
2.绑定数据
image.png827879943.png
3.属性中调整自定义属性
image.png382216796.png
代码内容:
  1. const chartData = option.series[0].data;
  2.     const colorList = ['#115FEA', '#10EBE3', '#10A9EB', '#EB9C10', '#2E10EB', '#9B10EB']
  3.     const sum = chartData.reduce((per, cur) => per + cur.value, 0)
  4.     const gap = (1 * sum) / 100
  5.     const pieData1 = []
  6.     const pieData2 = []
  7.     const legendData=[]
  8.     for (let i = 0; i < chartData.length; i++) {
  9.         // 第一圈数据
  10.         pieData1.push({
  11.             ...chartData[i],
  12.             itemStyle: {
  13.                 borderRadius: 10
  14.             }
  15.         })

  16.         // 第二圈数据
  17.         pieData2.push({
  18.             ...chartData[i],
  19.             itemStyle: {
  20.                 color: colorList[i],
  21.                 opacity: 0.21
  22.             }
  23.         })
  24.         legendData.push(chartData[i].name)
  25.     }

  26.     const _option = {
  27.         tooltip: {
  28.             show: true
  29.         },
  30.         legend:{
  31.             ...option.legend,
  32.             data:legendData
  33.         },
  34.         grid: option.grid,
  35.         color: colorList,
  36.         series: [
  37.             {
  38.                 name: '消息来源',
  39.                 type: 'pie',
  40.                 roundCap: true,
  41.                 radius: ['66%', '70%'],
  42.                 center: ['36%', '45%'],
  43.                 label: {
  44.                     show: false
  45.                 },
  46.                 labelLine: {
  47.                     show: false
  48.                 },
  49.                 data: pieData1
  50.             },
  51.             {
  52.                 type: 'pie',
  53.                 radius: ['66%', '54%'],
  54.                 center: ['36%', '45%'],
  55.                 gap: 1.71,
  56.                 label: {
  57.                     show: false
  58.                 },
  59.                 labelLine: {
  60.                     show: false
  61.                 },
  62.                 silent: true,
  63.                 data: pieData2
  64.             },
  65.             {
  66.                 type: 'pie',
  67.                 center: ['36%', '45%'],
  68.                 radius: [0, '45.6%'],
  69.                 label: {
  70.                     show: false
  71.                 },
  72.                 labelLine: {
  73.                     show: false
  74.                 },
  75.                 itemStyle: {
  76.                     color: 'rgba(75, 126, 203,.1)'
  77.                 },
  78.                 silent: true,
  79.                 data: [
  80.                     {
  81.                         value: 100
  82.                     }
  83.                 ]
  84.             }
  85.         ]
  86.     }
  87. return _option;
复制代码

运行,浏览效果。
示例案例: wyn-export-20240204152540.zip (398.41 KB, 下载次数: 4)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部