南丁格尔玫瑰图

描述:当前是关于Echarts图表中的 饼图 示例。
 
            //模拟数据
var data = [{
   "hangye": "非金属矿采选业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "广播、电视、电影和录音制作业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "航空运输业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "建筑安装业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "建筑装饰、装修和其他建筑业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "资本市场服务",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "保险业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "餐饮业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "畜牧业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "电力、热力生产和供应业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "电气机械和器材制造业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "多式联运和运输代理业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "房地产业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "房屋建筑业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "纺织服装、服饰业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "文化艺术业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "印刷和记录媒介复制业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "渔业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "住宿业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "专业技术服务业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "专用设备制造业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "零售业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "煤炭开采和洗选业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "农副食品加工业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "农、林、牧、渔专业及辅助性活动",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "农业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "其他服务业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "其他金融业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "其他制造业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "软件和信息技术服务业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "生态保护和环境治理业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "食品制造业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "水利管理业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "体育",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "铁路运输业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "通用设备制造业",
   "KB20_QYBBD22_BA_2": 0
}, {
   "hangye": "辅助性活动",
   "KB20_QYBBD22_BA_2": 144809
}, {
   "hangye": "水上运输业",
   "KB20_QYBBD22_BA_2": 533
}, {
   "hangye": "装卸搬运和仓储业",
   "KB20_QYBBD22_BA_2": 478
}, {
   "hangye": "道路运输业",
   "KB20_QYBBD22_BA_2": 1210
}, {
   "hangye": "商务服务业",
   "KB20_QYBBD22_BA_2": 34710
}, {
   "hangye": "批发业",
   "KB20_QYBBD22_BA_2": 42862
}, {
   "hangye": "装卸搬运和仓储业",
   "KB20_QYBBD22_BA_2": 478
}, {
   "hangye": "道路运输业",
   "KB20_QYBBD22_BA_2": 1210
}, {
   "hangye": "商务服务业",
   "KB20_QYBBD22_BA_2": 3471
}, {
   "hangye": "批发业",
   "KB20_QYBBD22_BA_2": 42862
}, {
   "hangye": "装卸搬运和仓储业",
   "KB20_QYBBD22_BA_2": 478
}, {
   "hangye": "道路运输业",
   "KB20_QYBBD22_BA_2": 1210
}, {
   "hangye": "商务服务业",
   "KB20_QYBBD22_BA_2": 34710
}, {
   "hangye": "批发业",
   "KB20_QYBBD22_BA_2": 42862
}];
var orgOptions = {
   "linkExtendList": [],
   "chart_type": "metaPortlet",
   "keys": [{
      "col": "hangye",
      "colType": "varchar",
      "values": [],
      "display": true,
      "id": "116a13c3-2c19-4ab7-8aea-15f0400f3250",
      "type": "eq",
      "$$hashKey": "object:1135",
      "alias": "hangye"
   }],
   "values": [{
      "name": "",
      "cols": [{
         "col": "KB20_QYBBD22_BA_2",
         "colDataType": "decimal",
         "expCalFormulaReplace": "",
         "series": {
            "percentile": true,
            "decimaldigits": 2
         },
         "expCalFormula": "",
         "alias": "资产总额",
         "column_type": "measure",
         "aggregate_type": "sum",
         "$$hashKey": "object:1139"
      }],
      "$$hashKey": "object:1133"
   }],
   "groups": [],
   "filters": [],
   "newChartType": "",
   "option": {
      "DESCRIPTION": "需要一个行维,一个轴字段",
      "BAMetaAttributes": {
         "isshowline": "2",
         "jieshirule": "{b}:{c} {d}%",
         "myfontsize": 14,
      },
      "chartColorList": ["#51ddf4", "#e5a506", "#fd767e", "#258df4", "#138c44", "#f9ff06", "#ed1b48",
         "#8cc63f", "#0000ff", "#9b0094", "#15e532", "#ff6700", "#cd70e0", "#238c5c", "#4657f2"
      ]
   }
};

var isshowline = orgOptions.option.BAMetaAttributes.isshowline == '1' ? false : true;
var jieshirule = orgOptions.option.BAMetaAttributes.jieshirule ? orgOptions.option.BAMetaAttributes.jieshirule :
   '{b}:{c} {d}%';
var myfontsize = orgOptions.option.BAMetaAttributes.myfontsize ? orgOptions.option.BAMetaAttributes.myfontsize : 14;

if (!(data instanceof Array)) {
   data = [];
}

var h1keyName = orgOptions.keys[0].col;
var z1keyName = orgOptions.values[0].cols[0].col;

data = data.filter((item) => {
   return item[z1keyName] != 0;
})


var chartData = [];
for (let index = 0; index < data.length; index++) {

   let item = {
      value: data[index][z1keyName],
      name: data[index][h1keyName],
   }
   chartData.push(item)
}


//数组排序,从大到小排序
chartData = chartData.sort(function (a, b) {
   return parseFloat(b.value) - parseFloat(a.value)
});

var showData = []
var sum = 0,
   max = 0;
chartData.forEach(item => {
   sum += item.value
   if (item.value >= max) max = item.value
})
// 放大规则
var number = Math.round(max * 0.1)
chartData = chartData.map(item => {
   return {
      value: number + item.value,
      name: item.name
   }
})



var option = {
   backgroundColor: '#041C38',
   tooltip: {
      show: true,
      formatter: function (param) {
         return param.name + ': ' + (param.value - number)
      }
   },
   legend: {
      show: true,
      right: '20%',
      top: 'middle',
      type: 'scroll',
      orient: 'vertical',
      align: 'right',
      textStyle: {
         color: "#fff",
         fontSize: myfontsize,
      },
      itemWidth: 15
   },
   series: [{
      type: 'pie',
      radius: ['10%', '40%'],
      center: ['40%', '50%'],
      roseType: 'area',
      sort: 'ascending', // for funnel
      label: {
         normal: {
            show: isshowline,
            position: 'outside',
            color: '#fff',
            alignTo: 'none',
            bleedMargin: 1,
            height: '30px',
            fontSize: myfontsize,
            formatter: function (param) {
               // return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100)
               // 	.toFixed(2) + '%'
               return (((param.value - number) / sum) * 100)
                  .toFixed(2) + '%'
            }
         }
      },
      labelLine: {
         normal: {
            show: isshowline,
            length: 5,
            lineStyle: {
               color: "#fff"
            },
         }
      },
      data: chartData,
   }]
}