Echarts在线免费图表

 
            var echartData = [
   {
      value: 200,
      name: "发明专利",
      progress: 20
   },
   {
      value: 300,
      name: "实用新型",
      progress: 30
   },
   {
      value: 500,
      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: '#FFF',
   // 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: '#000',
                  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%", "40%"],
         data: echartData,
      },
   ],
};