Echarts在线免费图表

 
            
   
  var data1 = [{
    label: "幼年",
    value: 40
  },
  {
    label: "青年",
    value: 60
  }
  ]
  var data2 = [{
    label: "幼年",
    value: 60
  },
  {
    label: "青年",
    value: 40
  }
  ]
  var data3 = [{
    label: "幼年",
    value: 65
  },
  {
    label: "青年",
    value: 35
  }
  ]
  var data4 = [{
    label: "幼年",
    value: 90
  },
  {
    label: "青年",
    value: 10
  }
  ]





const color1 = [
 new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  {
      offset: 0,
      color: '#CC00FD',
  },
  {
      offset: 1,
      color: '#6E00F8',
  },
]),
'rgba(0,0,0,0)'
];
const color2 = [
 new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  {
      offset: 0,
      color: '#FC720F',
  },
  {
      offset: 1,
      color: '#FDC51A',
  },
]),
'rgba(0,0,0,0)'
];
const color3 = [
 new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  {
      offset: 0,
      color: '#55A7F3',
  },
  {
      offset: 1,
      color: '#9FFFCE',
  },
]),
'rgba(0,0,0,0)'
];
const color4 = [
 new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  {
      offset: 0,
      color: '#CB1BEC',
  },
  {
      offset: 1,
      color: '#D124E0',
  },
]),
'rgba(0,0,0,0)'
];
option = {
backgroundColor: '#0f375f',
tooltip: {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c} ({d}%)',
  textStyle: {
      fontSize: 18
  }
},
series: [
  {
  name: '年龄1',
  type: 'pie',
  radius: ['20%', '90%'],
  center: ['50%', '50%'],
  roseType: 'radius',
  startAngle:170, //起始角度
  labelLine: {
           show: false,
      length: 2,
      length2: 7
  },
  data: data1.map((it, i) => {
      return {
          value: it.value,
          itemStyle: {
              color: color1[i],
              // borderColor: `rgba(${colors[i]},1)`,
              // borderWidth: 1
          }
      };
  })
},
    {
  name: '年龄2',
  type: 'pie',
  radius: ['18%', '55%'],
  center: ['50%', '50%'],
  roseType: 'radius',
  startAngle:340, //起始角度
  labelLine: {
           show: false,
      length: 2,
      length2: 7
  },
  data: data2.map((it, i) => {
      return {
          value: it.value,
          itemStyle: {
              color: color2[i],
              // borderColor: `rgba(${colors[i]},1)`,
              // borderWidth: 1
          }
      };
  })
},
   {
  name: '年龄3',
  type: 'pie',
  radius: ['18%', '45%'],
  center: ['50%', '50%'],
  roseType: 'radius',
  startAngle:250, //起始角度
  labelLine: {
           show: false,
      length: 2,
      length2: 7
  },
  data: data3.map((it, i) => {
      return {
          value: it.value,
          itemStyle: {
              color: color3[i],
              // borderColor: `rgba(${colors[i]},1)`,
              // borderWidth: 1
          }
      };
  })
},
    {
  name: '年龄4',
  type: 'pie',
  radius: ['18%', '30%'],
  center: ['50%', '50%'],
  roseType: 'radius',
  startAngle:200, //起始角度
  labelLine: {
           show: false,
      length: 2,
      length2: 7
  },
  data: data4.map((it, i) => {
      return {
          value: it.value,
          itemStyle: {
              color: color4[i],
              // borderColor: `rgba(${colors[i]},1)`,
              // borderWidth: 1
          }
      };
  })
},
]
};