Echarts在线免费图表

 
            // 初始化数据
let infoList = [
   { name: '综甲仪器设备', value: 1024 },
   { name: 'CMA仪器设备', value: 2048 }
];
let sum = 0;
let legendData = [];
infoList.forEach((item) => {
   sum += item.value * 1; // *1保证sum值为数值
   legendData.push(item.name);
});
infoList.push({
   name: '总数',
   value: sum,
   tooltip: { formatter: () => '' },
   itemStyle: { normal: { color: 'rgba(0, 0, 0, 0)' } },
});
option = {
   backgroundColor: '#fff',
   color: ['rgba(141, 113, 226, 0.7)', 'rgba(116, 178, 252, 0.7)'],
   tooltip: {
      trigger: 'item',
      axisPointer: {
         type: 'shadow',
      },
      formatter: function (param) {
         let str = '';
         let c = (param['value'] / sum) * 100; // 算出百分比
         c = c.toFixed(2);
         str = str + c + '%';
         return param.name + ': ' + param['value'] + '/' + str;
      },
   },
   title: [

      {

         text: '{a|' + 150 + ' ' + '}{a|' + ' ' + 69.44 + '%' + '}\n{c|' + '综甲及CMA仪器设备' + '}',
         x: 'center',
         y: '56%',

         textStyle: {
            rich: {
               a: {
                  color: 'rgba(23, 26, 29, 0.6000)',
                  fontSize: 18,
                  fontWeight: 700,
                  height: 30
               },

               c: {
                  fontSize: 14,
                  color: 'rgba(23, 26, 29, 0.6000)',
                  padding: [5, 0]
               }
            }
         }
      }
   ],
   legend: {
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
      // orient: 'vertical', // vertical 设置图例展示方向
      icon: 'circle',
      data: legendData,

      bottom: '25%',
      width: 380,
      formatter: function (params) {
         let v = '';
         var num = ''
         for (let i = 0; i < infoList.length; i++) {
            if (infoList[i].name == params) {
               v = ((infoList[i].value / sum) * 100).toFixed(2) + '%';
               num = infoList[i].value
            }
         }
         return params + '  ' + num + '   ' + v;
      },
   },

   series: [
      {
         type: 'pie',
         startAngle: -180,
         radius: ['55%', '75%'],
         center: ['50%', '65%'],
         data: infoList,
         labelLine: {
            show: false,
         },
         label: {
            show: false,
            position: 'center',
         },
         itemStyle: {

            emphasis: {
               shadowBlur: 10,
               shadowOffsetX: 10,
               shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
         },
      },

   ],
};