echarts下工资收入、五险一金、个人所得税走势图表

燕飞南北知暑热，人走东西只为钱。

echarts下的line实现的北京地区（2016年基准）工资收入、五险一金、个人所得税计算图表。

直接访问：http://gallery.echartsjs.com/preview.html?c=xHJlPbUPRzb

附代码：

（注：可直接在http://echarts.baidu.com/demo.html#area-simple内清空代码区后，粘贴以下代码实现）

//-----------------------------dn：可进行参数设置------------------------------
var bFixedIn = false;           // 固定社保基数标志：false不固定，true固定
var bFixedHouse = false;        // 固定公积金基数标志：false不固定，true固定var fFixedInBase = 13768;       // 固定的社保基数
var fFixedHouseBase = 12000;     // 固定的公积金基数var fExemptionPoint = 3500;     // 免税起点  // 五险一金个人比例
var fRateInEnd = 0.08;          // 养老 8%
var fRateInMed = 0.02;          // 医疗 2%
var fRateInUnEmp = 0.002;       // 失业 0.2%
var fRateInInjuery = 0;         // 工伤
var fRateInMate = 0;            // 生育
var fRateInHouse = 0.12;        // 公积金  // 北京2016年上、下限var fInEndMin = 2834;           // 养老保险下限
var fInEndMax = 21258;          // 养老保险上限  var fInMedMin = 4252;           // 医疗保险下限
var fInMedMax = fInEndMax;      // 医疗保险上限  var fInHouseMin = 412.8 / 2;    // 公积金下限
var fInHouseMax = 5101.92 / 2;  // 公积金上限  //-----------------------------up：可进行参数设置------------------------------// 计算人个交五险一金
function funcCalc5In(fIncome) {  var fSum = 0;  // 养老  var fInEndTmp = fIncome < fInEndMin ? fInEndMin  : (fIncome > fInEndMax ? fInEndMax : fIncome);  fSum += fInEndTmp * fRateInEnd;  // 医疗  var fInMedTmp = fIncome < fInMedMin ? fInMedMin  : (fIncome > fInMedMax ? fInMedMax : fIncome);  fSum += fInMedTmp * fRateInMed;  // 失业  var fInUnEmpTmp = fIncome < fInEndMin ? fInEndMin  : (fIncome > fInEndMax ? fInEndMax : fIncome);  fSum += fInUnEmpTmp * fRateInUnEmp;  // 工伤  var fInInjueryTmp = fIncome < fInMedMin ? fInMedMin  : (fIncome > fInMedMax ? fInMedMax : fIncome);  fSum += fInInjueryTmp * fRateInInjuery;  // 生育  var fInMateTmp = fIncome < fInMedMin ? fInMedMin  : (fIncome > fInMedMax ? fInMedMax : fIncome);  fSum += fInMateTmp * fRateInMate;  return fSum;
}  // 计算公积金
function funcCalcHouse(fIncome) {// 公积金  var fInHouseTmp = fIncome * fRateInHouse;  fInHouseTmp = fInHouseTmp < fInHouseMin ? fInHouseMin   : (fInHouseTmp > fInHouseMax ? fInHouseMax : fInHouseTmp);  return fInHouseTmp;
}// 计算税
function funcCalcTax(fIncome, f5In, fExemptionPoint) {  var iRet = 0;  var strRank = '';var fVal = fIncome - f5In - fExemptionPoint;  if (fVal <= 0) {  iRet = 0;  strRank = '不用交税';}   else if (fVal <= 1500){  iRet = fVal * 0.03;  strRank = '(0, 1500]';}   else if (fVal <= 4500) {  iRet = fVal * 0.1 - 105;  strRank = '(1500, 4500]';}  else if (fVal <= 9000) {  iRet = fVal * 0.2 - 555;  strRank = '(4500, 9000]';}  else if (fVal <= 35000) {  iRet = fVal * 0.25 - 1005;  strRank = '(9000, 35000]';}  else if (fVal <= 55000) {  iRet = fVal * 0.3 - 2755;  strRank = '(35000, 55000]';}  else if (fVal <= 80000) {  iRet = fVal * 0.35 - 5505;  strRank = '(55000, 80000]';}  else {  iRet = fVal * 0.45 - 13505;  strRank = '土豪';}  var objTmp = {};objTmp.val = iRet;objTmp.rank = strRank;return objTmp;
}  var aryIncomeX = [];
var aryIncomeYTax = [];
var aryIncomeY = [];
var aryIncomeYRankDesc = [];
var aryIncomeY5In = [];
var aryIncomeYHouse = [];
var fIncomeLeft = 3500;
var fIncomeRight = 90000;
for (var i = fIncomeLeft; i <= fIncomeRight; i += 100) {  aryIncomeX.push(i);  var f5In = funcCalc5In(bFixedIn ? fFixedInBase : i); //.toFixed(2);  var fHousePerson = funcCalcHouse(bFixedHouse ? fFixedHouseBase : i); //.toFixed(2);var f5In_House = f5In + fHousePerson;var objVal_Rank = funcCalcTax(i, f5In_House, fExemptionPoint);var fTax = Math.ceil(objVal_Rank.val);  aryIncomeYTax.push(fTax);  aryIncomeY.push(i - fTax - f5In_House);  aryIncomeY5In.push(f5In);  aryIncomeYHouse.push(fHousePerson);aryIncomeYRankDesc.push(objVal_Rank.rank);
}  option = {  title: {  text: 'tax in beijing : exemption pt : ' + fExemptionPoint  },  tooltip: {  trigger: 'axis',  formatter: function(params) {  var iIndex = params[0].dataIndex;  var aryHtml = [];  // 收入  aryHtml.push('收入：' + aryIncomeX[iIndex] + '<br />');  // 五险  aryHtml.push('五险：' + aryIncomeY5In[iIndex].toFixed(2) + '<br />');  // 公积金  aryHtml.push('公积金：' + aryIncomeYHouse[iIndex].toFixed(2) + '<br />');  // 五险+公积金  aryHtml.push('五险+公积金：' + (aryIncomeY5In[iIndex] + aryIncomeYHouse[iIndex]).toFixed(2) + '<br />');  // 个税  aryHtml.push('个税：' + aryIncomeYTax[iIndex].toFixed(2) + '<br />');  // 个税等级  aryHtml.push('个税等级：' + aryIncomeYRankDesc[iIndex] + '<br />');  // 五险+公积金+个税aryHtml.push('五险+公积金+个税：' + (aryIncomeY5In[iIndex] + aryIncomeYHouse[iIndex] + aryIncomeYTax[iIndex]).toFixed(2) + '<br />');  // 税后收入  aryHtml.push('税后收入：' + aryIncomeY[iIndex].toFixed(2) + '<br />');  // +公积金税后收入aryHtml.push('+公积金税后收入：' + (aryIncomeY[iIndex] + aryIncomeYHouse[iIndex] * 2).toFixed(2) + '<br />');  // 年收入  aryHtml.push('年收入：' + (aryIncomeX[iIndex] * 12).toFixed(2) + '<br />');  // 税后年收入  aryHtml.push('税后年收入：' + (aryIncomeY[iIndex] * 12).toFixed(2) + '<br />');  // +公积金税后年收入  aryHtml.push('+公积金税后年收入：' + ((aryIncomeY[iIndex] + aryIncomeYHouse[iIndex] * 2) * 12).toFixed(2) + '<br />');  // 年缴税  aryHtml.push('年缴税：' + (aryIncomeYTax[iIndex] * 12).toFixed(2) + '<br />');  return aryHtml.join('');  }  },  xAxis: {  data: aryIncomeX  },  yAxis: [  {  type: 'value',  scale: true,  name: 'tax',  //max: 20000,  min: 0  },  {  type: 'value',  scale: true,  name: 'income',  max: fIncomeRight,  min: 0,  splitLine: {  show: false  }  }  ],  legend: {  right: 20,  data: ['tax', 'income']    },  dataZoom: [{  start: 0,  end: 100  }, {  type: 'inside'  }],  series: [{  name: 'tax',  type: 'line',  yAxisIndex: 0,  data: aryIncomeYTax},   {  name: 'income',  type: 'line',  yAxisIndex: 1,  data: aryIncomeY  }  ]
};

echarts下工资收入、五险一金、个人所得税走势图表相关推荐

echarts 横坐标显示一个月_图表太丑怎么破，ECharts神器带你飞！
一.前言在本专栏或文集中,我曾多次使用ECharts绘制图表.进行可视化,也渐渐积累了30多个实例,本文对此前用过的所有图表和代码进行整理并分享,以给想绘制精美图表的人一点绵薄的帮助.其中全部实例已 ...
JS----多个Echarts resize方法，只有一个图表自适应生效
多个Echarts resize方法,只有一个图表自适应生效 Echarts的 resize方法,在多个echarts图标下window.onresize,只有一个图表自适应生效有多个时,单个生效 ...
ECharts学习（1）--简单图表的绘制
1.获取ECharts 官网下载:http://echarts.baidu.com/download.html 2.在html页面中引入ECharts文件 <!DOCTYPE html> ...
html数字数据走势图,利用HTML5实现数据曲线走势图表代码
特效描述:利用HTML5实现数据曲线走势图表代码.利用HTML5实现数据曲线走势图表代码代码结构 1. 引入JS 2. HTML代码 var data = generateDayWiseTime ...
echarts.min.js包是各种图表工具一种脚本
是一个百度旗下使用各种图表展示统计分析结果的js插件引入这个js,你就可以使用echarts官网上提供的所有图表工具官网: https://echarts.apache.org/zh/inde ...
Spring Boot 2.x基础教程：使用 ECharts 绘制各种华丽的数据图表
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 翟永超来源 | http://blog.di ...
echarts legend颜色_echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html js var loadEcharts09 = function () { var myChartss = echarts.init(d ...
当python遇上echarts （三）绘制3D图表
当python遇上echarts (二)绘制基本图表文章目录前言 3D图形配置项及方法 Grid3DOpts:三维笛卡尔坐标系配置项 Axis3DOpts:三维坐标轴配置项 add(): 共有的方 ...
Echarts使用及动态加载图表数据折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度...我想应该够简洁了使用Echarts 目前,就官网的文 ...

echarts下工资收入、五险一金、个人所得税走势图表

echarts下工资收入、五险一金、个人所得税走势图表相关推荐

最新文章

热门文章