Echarts在线免费图表

 
            var seriesData = [
   {
      name: '低风险',
      value: 3321,
      rate: 40
   },
   {
      name: '一般风险',
      value: 4544,
      rate: 50
   },
   {
      name: '较大风险',
      value: 7899,
      rate: 60
   }
]
var optionRich = {
   a: {
      width: 60,
      fontSize: 18,
      fontWeight: 400,
      color: '#FFF',
      lineHeight: 20,
      padding: [0, 50, 0, 0]
   },
}
var optionColorArr = {
   '低风险': '#5694FF',
   '一般风险': '#FFCC1A',
   '较大风险': '#FF9152',
}
seriesData.forEach((ele, i) => {
   optionRich[i] = {
      width: 20,
      fontSize: 18,
      fontWeight: 400,
      lineHeight: 20,
      color: optionColorArr[ele.name],
      align: 'center',
      padding: [0, 0, 0, 20]
   }
});
option = {
   backgroundColor: '#002653',
   color: seriesData.map((item) => optionColorArr[item.name]),
   title: {
      text: `{a| 总数 }`,
      textStyle: {
         rich: {
            a: {
               fontSize: 22,
               color: '#FFF',
            },
         },
      },
      subtext: `{a|${100 + '个'}}`,
      subtextStyle: {
         rich: {
            a: {
               fontSize: 28,
               color: '#FFF',
               padding: [0, 0, 0, -5],
            },
         },
      },
      x: '20%',
      y: '45%',
   },
   tooltip: {
      trigger: 'item',
      show: true,
      formatter: (params) => {
         const { data, name, value } = params;
         return `
               <div style="color: ${params.color}; font-size: 18px;">${name}&nbsp;&nbsp;&nbsp;<span style="font-size: 20px; color: #000; float: right;">${value}</span></div>
               <div style="color: ${params.color}; font-size: 17px;">占比&nbsp;<span style="font-size: 20px; color: #000; float: right;">${data.rate}%</span></div>
            `;
      },
   },
   grid: {
      top: '0',
      left: '0',
      right: '0',
      bottom: '0',
      containLabel: true
   },
   legend: {
      type: 'scroll',
      orient: 'vertical',
      left: '50%',
      align: 'left',
      top: 'middle',
      icon: 'circle',
      itemHeight: 15,
      itemWidth: 15,
      itemGap: 20,
      height: 300,
      formatter: function (name) {
         let index = 0
         let value = 0;
         let rate = 0;
         seriesData.forEach((item, i) => {
            if (item.name == name) {
               value = item.value ? item.value : 0;
               rate = item.rate ? item.rate : 0;
               index = i;
            }
         })
         return `{a|${name}}{${index}|${rate + '%'}}{${index}|${'|'}}{${index}|${value}}`
      },
      textStyle: {
         rich: optionRich
      }
   },
   series: [
      {
         type: 'pie',
         center: ['25%', '50%'],
         radius: ['30%', '40%'],
         clockwise: true, //饼图的扇区是否是顺时针排布
         avoidLabelOverlap: false,
         label: {
            normal: {
               show: false,
            }
         },
         data: seriesData,
      }
   ]
};