Echarts在线免费图表

 
              // 内圈饼图数据
let data1 = [
  { value: 15, name: '一', roseType: 'radius'},
  { value: 5, name: '二' },
  { value: 20, name: '三' },
  { value: 60, name: '四'}
];
// 左侧大饼图数据
let data2 = [
  { value: 40, name: '三',
    itemStyle: {
      color: 'none',
      decal: {
        symbol: 'none'
      },
      borderWidth: 0
    },
    label: {
      show: false
    }
  },
  { value: 60, name: '四' }
]
// 左侧饼图数据
let data3 = [
  { value: 70, name: '三',
    itemStyle: {
      color: 'none',
      decal: {
        symbol: 'none'
      },
      borderWidth: 0
    },
    label: {
      show: false
    }
  },
  { value: 30, name: '四', itemStyle: {color: 'lightgreen'} }
]
// 左侧小绿图数据
let data4 = [
  { value: 85, name: '三',
    itemStyle: {
      color: 'none',
      decal: {
        symbol: 'none'
      },
      borderWidth: 0
    },
    label: {
      show: false
    }
  },
  { value: 15, name: '四', itemStyle: {color: 'green'} }
]
// 顶部小蓝图数据
let data5 = [
  { value: 95, name: '三',
    itemStyle: {
      color: 'none',
      decal: {
        symbol: 'none'
      },
      borderWidth: 0
    },
    label: {
      show: false
    }
  },
  { value: 5, name: '四', itemStyle: {color: 'yellow'} }
]
// 顶部小黄图数据
let data6 = [
  { value: 80, name: '三',
    itemStyle: {
      color: 'none',
      decal: {
        symbol: 'none'
      },
      borderWidth: 0
    },
    label: {
      show: false
    }
  },
  { value: 20, name: '四', itemStyle: {color: '#19a8ed'} }
]
// 计算仪表盘开始角度与结束角度
let total = data1.map(item => item.value).reduce((acc, cur) => acc + cur);
let startAngle = 90 - 360 * (15 + 5) / total;
let endAngle = startAngle - 360;
option = {

  tooltip: {
    show: false
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  title: [
    {
      show: true,
      text: '标题',
      left: 'center',
      top: '40%',
      padding: [0, 0, 10, 0],
      textStyle: {
        fontSize: 36,
      }
    },
    {
      subtext: `{value|123456\n}` + `{unit|单位}`,
      left: 'center',
      top: '46%',
      backgroundColor: '#f0f7fa',
      subtextStyle: {
        fontWeight: 'blod',
        rich: {
          value: {
            fontSize: 50,
            color: '#4373a6',
          },
          unit: {
            color: 'gray',
            fontSize: 30,
            lineHeight: 60
          }
        }
      }
    }
  ],
  series: [
    // 中心仪表盘
    {
      name: 'Pressure',
      type: 'gauge',
      clockwise: false,
      startAngle: startAngle,
      endAngle: endAngle,
      center: ['50%', '50%'],
      radius: '39.5%',
      pointer: {
        show: false
      },
      progress: {
        show: true,
        width: 12
      },
      axisLine: {
        lineStyle: {
          width: 12
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        formatter: '{value}'
      },
      data: [
        {
          value: 50,
          name: 'SCORE'
        }
      ]
    },
    // 内圈饼图
    {
      name: '蛋糕',
      type: 'pie',
      startAngle: 90,
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: data1
    },
    // 左侧大饼图
    {
      name: '蛋糕',
      type: 'pie',
      startAngle: 90,
      colorBy: 'data',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: 'rgba(0,0,0,.5)',
        borderWidth: 2,
        borderType: 'dashed'
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: data2
    },
    // 左侧饼图
    {
      name: '蛋糕',
      type: 'pie',
      startAngle: 90,
      colorBy: 'data',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: 'rgba(0,0,0,.5)',
        borderWidth: 2,
        borderType: 'dashed'
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: data3
    },
    // 左侧小绿图
    {
      name: '蛋糕',
      type: 'pie',
      startAngle: 90,
      colorBy: 'data',
      radius: ['43%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: data4
    },
    // 顶部小蓝图
    {
      name: '蛋糕',
      type: 'pie',
      clockwise: false,
      startAngle: 90,
      colorBy: 'data',
      radius: ['43%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: data5
    },
    // 顶部小黄图
    {
      name: '蛋糕',
      type: 'pie',
      startAngle: 72,
      colorBy: 'data',
      radius: ['40%', '43%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: data6
    },
  ]
}