Echarts在线免费图表

 
            //模拟数据
var data = [{
   "RYLB_TEXT": "合同资产",
   "A01008_BA_2": 30
}, {
   "RYLB_TEXT": "存货",
   "A01008_BA_2": 40
}, {
   "RYLB_TEXT": "应收账款",
   "A01008_BA_2": 10
}, {
   "RYLB_TEXT": "其他应收款",
   "A01008_BA_2": 27
}];
var orgOptions = {
   "keys": [{
      "col": "RYLB_TEXT",
      "alias": "RYLB_TEXT"
   }],
   "values": [{
      "cols": [{
         "col": "A01008_BA_2",
         "alias": "A01008"
      }]
   }],
};


var namefield = orgOptions.keys[0].col; //行维字段名
var valuefield = orgOptions.values[0].cols[0].col; //轴字段名1

var tooltipFormatter = "{b}: {c} ({d}%)";
var tooltip = {
   show: true,
   trigger: 'item',
   formatter: tooltipFormatter
};

if (!tooltipFormatter) {
   tooltip.show = false
}



var seriesName = orgOptions.values[0].cols[0].alias || orgOptions.values[0].cols[0].col;

name = data[0][namefield];
var colorList = ['#099D58', '#00C9FF', '#F87F01', '#FFFA12', '#ff5c7a', '#0CE9F1'];

var showData = []; //显示的data
var sum = 0;
for (var i = 0; i < data.length; i++) {
   var item = data[i];
   var obj = {
      value: item[valuefield],
      name: item[namefield]
   };
   showData.push(obj);
   sum = sum + item[valuefield];

   console.log(sum)
}

var innerText = "";
var innerTextFontSize = 16;
var innerTextfontWeight = "normal";
option = {
   backgroundColor: '#041C38',
   color: colorList,
   tooltip: tooltip,
   grid: {
      bottom: 150,
      left: '20%',
      right: '20%'
   },
   legend: {
      show: false,
      left: '57%',
      top: 'middle',
      type: 'scroll',
      orient: 'vertical',
      align: 'left',
      textStyle: {
         color: "#fff",
         fontSize: 14,
      },
      formatter: (name) => {
         var thisItem;
         for (var i = 0; i < showData.length; i++) {
            if (showData[i].name === name) {
               thisItem = showData[i];
            }
         }
         return (
            // {name|' + item.name + '}
            "{name|" + name + "} {percent|" + ((thisItem.value / sum) * 100).toFixed(2) + "%}"
         );
      },
      textStyle: {
         color: "#beceff", //元字颜色
         rich: {
            name: {
               color: '#E6EFFF',
               fontSize: 14,
            },
            percent: {
               color: '#E6EFFF',
               fontSize: 15,
            }
         }
      },
   },
   series: [{
      type: 'pie',
      roundCap: true,
      radius: ['66%', '70%'],
      center: ['50%', '50%'],
      itemStyle: {
         normal: {
            label: {
               show: true,
               position: 'outside',
               color: 'transparent',
               fontSize: 14,
               formatter: function (params) {
                  return params.name + '\t\n' + ((params.data.value / sum) * 100).toFixed(2) +
                     "%";
               },
            },
            labelLine: {
               length: 20,
               length2: 100,
               show: true,
            },
         },
      },
      data: showData
   },
   {
      type: 'pie',
      radius: ['66%', '50%'],
      center: ['50%', '50%'],
      gap: 1.71,
      label: {
         show: false
      },
      labelLine: {
         show: false
      },
      itemStyle: {
         normal: {
            color: function (params) {
               return colorList[params.dataIndex % colorList.length] + '40'
            }
         }
      },
      silent: true,
      data: showData
   },
   {
      name: '数值部分',
      type: 'pie',
      roundCap: true,
      radius: ['66%', '70%'],
      center: ['50%', '50%'],
      itemStyle: {
         normal: {
            label: {
               show: true,
               position: 'outside',
               color: '#ffffff',
               lineHeight: 26,
               fontSize: 14,
               formatter: function (params) {
                  return params.name + '\t\n' + ((params.data.value / sum) * 100).toFixed(2) +
                     "%";
               },
            },
            labelLine: {
               length: 20,
               length2: 40,
               show: true,
               lineStyle: {
                  color: 'transparent',
               }
            },
         },
      },
      data: showData
   },
   ]
};