Echarts在线免费图表

 
            var echartData = [
   {
      value: 5555,
      name: "低风险",
      progress: 25
   },
   {
      value: 3221,
      name: "一般风险",
      progress: 30
   },
   {
      value: 1222,
      name: "较大风险",
      progress: 50
   }
];

var color = [
   [
      { offset: 0, color: '#FF8B55' },
      { offset: 1, color: '#FF8B55' },
   ],
   [
      { offset: 0, color: '#6DBEFF' },
      { offset: 1, color: '#6DBEFF' },
   ],
   [
      { offset: 0, color: '#28F2E7' },
      { offset: 1, color: '#28F2E7' },
   ],
];
echartData.forEach((item, index) => {
   item.itemStyle = {
      color: new echarts.graphic.LinearGradient(
         0,
         0,
         0,
         1,
         color[index],
      ),
   };
});

option = {
   color,
   backgroundColor: '#002653',
   title: {
      text: "总数",
      subtext: echartData && echartData.reduce((prev, cur) => {
         return prev + cur.value;
      }, 0),
      textStyle: {
         color: "#FFF",
         fontSize: 20,
         align: "center",
      },
      subtextStyle: {
         fontSize: 25,
         color: ["#FFF"],
      },
      x: "center",
      y: "45%",
   },
   series: [
      {
         type: 'pie',
         minAngle: 5,
         startAngle: 10, //起始角度
         labelLine: {
            show: true,
            length: 20,
            length2: 10,
            lineStyle: {
               width: 2
            }
         },
         label: {
            formatter: (params) => {
               const name = params.name
               return `{f${params.dataIndex + 1}|${params.data.progress}%}\n{t|${name + ' ' + params.value}}`
            },
            rich: {
               t: {
                  color: '#FFF',
                  lineHeight: 20,
                  fontSize: 20,
                  align: 'left'
               },
               f1: {
                  color: '#FF8B55',
                  fontSize: 20,
                  align: 'center',
                  lineHeight: 28
               },
               f2: {
                  color: '#6DBEFF',
                  fontSize: 20,
                  align: 'center',
                  lineHeight: 28
               },
               f3: {
                  color: '#28F2E7',
                  fontSize: 20,
                  align: 'center',
                  lineHeight: 28
               },
            }
         },
         center: ['50%', '50%'],
         radius: ["20%", "30%"],
         data: echartData,
      },
   ],
};