Echarts在线免费图表

 
            //模拟数据
var data = [{
   "RYLB_TEXT": "影像问题",
   "A01008_BA_2": 30
}, {
   "RYLB_TEXT": "分摊问题",
   "A01008_BA_2": 40
}, {
   "RYLB_TEXT": "其他",
   "A01008_BA_2": 10
}];
var orgOptions = {
   "linkExtendList": [],
   "chart_type": "metaPortlet",
   "keys": [{
      "col": "RYLB_TEXT",
      "colType": "varchar",
      "values": [],
      "display": true,
      "id": "29b19207-f4b8-43ca-9391-d921ec15ac4b",
      "type": "eq",
      "$$hashKey": "object:713",
      "alias": "RYLB_TEXT"
   }],
   "values": [{
      "name": "",
      "cols": [{
         "col": "A01008_BA_2",
         "colDataType": "decimal",
         "expCalFormulaReplace": "",
         "series": {
            "percentile": true,
            "decimaldigits": 2
         },
         "expCalFormula": "",
         "column_type": "measure",
         "aggregate_type": "sum",
         "$$hashKey": "object:717",
         "alias": "A01008"
      }],
      "$$hashKey": "object:711"
   }],
   "groups": [],
   "filters": [],
   "newChartType": "",
   "option": {
      "DESCRIPTION": "需要一个行维，一个轴字段",
      "BAMetaAttributes": {
         "isshowline": '2'
      },
      "chartColorSet": "technologyblue",
      "richTitle": "",
      "chartColorList": ["#51ddf4", "#e5a506", "#fd767e", "#258df4", "#138c44", "#f9ff06", "#ed1b48",
         "#8cc63f", "#0000ff", "#9b0094", "#15e532", "#ff6700", "#cd70e0", "#238c5c", "#4657f2"
      ],
      "title": {
         "subtext": "",
         "left": "center",
         "text": "",
         "textStyle": {
            "fontFamily": "sans-serif",
            "color": "rgb(255, 255, 255)",
            "fontSize": "12",
            "fontStyle": "normal",
            "fontWeight": "normal"
         },
         "subtextStyle": {
            "fontFamily": "sans-serif",
            "color": "rgb(255, 255, 255)",
            "fontSize": "12",
            "fontStyle": "normal",
            "fontWeight": "normal"
         }
      },
      "metaPortletType": "096999ce-ce75-4787-856b-090c4a92af51",
      "autorefresh": false
   }
};


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 = ['#57DF9C', '#14C5FF', '#FFD42A', '#F87F01'];

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";
var option = {
   backgroundColor: "#041C38",
   color: colorList,
   tooltip: tooltip,
   title: {
      zlevel: 0,
      text: sum,
      subtext: '总数(条)',
      top: '30%',
      left: '50%',
      textAlign: 'center',
      itemGap: 30,
      textStyle: {
         color: '#ffffff',
         fontSize: 30,
      },
      subtextStyle: {
         fontSize: 30,
         color: '#ffffff',
      },
   },
   grid: {
      bottom: 150,
      left: 0,
      right: '10%'
   },
   legend: {
      show: true,
      top: 'bottom',
      type: 'scroll',
      orient: 'horizontal',
      align: 'left',
      icon: "circle",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 30,
      textStyle: {
         color: "#fff",
         fontSize: 16,
      },
      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 + "}  \n {percent|"
            "{name|" + name + "} " + "\n" + "{name|" + thisItem.value + '条' + "} " + "{percent|" + ((thisItem.value /
               sum) * 100).toFixed(0) + "%}"
         );
      },
      textStyle: {
         color: "#beceff", //元字颜色
         rich: {
            name: {
               color: '#E6EFFF',
               fontSize: 16,
               lineHeight: 20,
            },
            percent: {
               color: '#E6EFFF',
               fontSize: 16,
               lineHeight: 20,
            }
         }
      },
   },
   series: [
      // 主要展示层的
      {
         name: seriesName,
         radius: ['45%', '62%'],
         center: ['50%', '40%'],
         type: 'pie',
         hoverOffset: 0,
         label: {
            show: false,
            color: '#eeeeee',
            fontSize: 14
         },
         labelLine: {
            normal: {
               show: false,
               lineStyle: {
                  color: '#d3d3d3'
               },
               align: 'right'
            },
            color: "#000",
            emphasis: {
               show: false,
            }
         },
         data: showData
      },

   ]
};