echartsUtils.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. import $ from 'jquery'
  2. export let cityPosJson = {}; //城市的经纬度信息
  3. /**
  4. * 显示图形的 tooltip
  5. * @param params
  6. * @param fmt
  7. * @param unit
  8. * @param fmt2
  9. * @param unit2
  10. * @param y2ser 在曲线图,柱状图的多指标图形中,在第二纵轴显示的指标
  11. * @returns {string}
  12. */
  13. export const toolTips = (params, fmt, unit, ydesc, fmt2, unit2, y2desc, thb, chartId, y2ser) => {
  14. if(params.length){ //数组
  15. //o = params[0];
  16. var s = '<b>' + params[0].name + "</b><br/>";
  17. $(params).each(function(a, b){
  18. s += b.seriesName === "" ?"": b.seriesName +": ";
  19. if(y2ser){
  20. if(y2ser.indexOf(b.seriesName) >= 0){
  21. s += formatNumber(b.data, fmt2) + unit2;
  22. }else{
  23. s += formatNumber(b.data, fmt) + unit;
  24. }
  25. }else if(thb === true) { //具体同环比计算等衍生指标
  26. if (b.seriesName.indexOf("同比") >= 0 || b.seriesName.indexOf("环比") >= 0) {
  27. s += formatNumber(b.data, "0.00%");
  28. } else {
  29. s += formatNumber(b.data, fmt) + unit;
  30. }
  31. }else{
  32. if (fmt2) { //双指标
  33. var chart = echarts.getInstanceByDom(document.getElementById(chartId));
  34. var opts = chart.getOption();
  35. $(opts.series).each(function(c, d){
  36. if(d.name === b.seriesName){
  37. if(d.yAxisIndex === 1 || d.xAxisIndex === 1) {
  38. s += formatNumber(b.data, fmt2) + unit2; //y2轴
  39. }else{
  40. s += formatNumber(b.data, fmt) + unit; // y轴
  41. }
  42. return false;
  43. }
  44. });
  45. } else {
  46. s += formatNumber(b.data, fmt) + unit;
  47. }
  48. }
  49. if(!(a === params.length - 1)){
  50. s += "<br/>";
  51. }
  52. });
  53. return s;
  54. }else{
  55. var o = params;
  56. return o.name + ': '+ formatNumber(o.value, fmt)+unit;
  57. }
  58. }
  59. //数字格式化
  60. export const formatNumber = (num,pattern, shortname)=>{
  61. if(!pattern || pattern.length == 0){
  62. return num;
  63. }
  64. var negative = false; //负数
  65. if(num < 0 ){
  66. num = Math.abs(num);
  67. negative = true;
  68. }
  69. var shortdw;
  70. if(shortname && num > 100000000){
  71. num = num / 100000000;
  72. shortdw = "亿";
  73. }else if(shortname && num > 10000000){
  74. num = num / 10000000;
  75. shortdw = "千万";
  76. }else if(shortname && num > 1000000){
  77. num = num / 1000000;
  78. shortdw = "百万";
  79. }else if(shortname && num > 10000){
  80. num = num / 10000;
  81. shortdw = "万";
  82. }else if(shortname && num > 1000){
  83. num = num / 1000;
  84. shortdw = "千";
  85. }
  86. if(pattern.indexOf("%") <= 0 && shortname){
  87. return (negative?"-":"") + (Math.round(num * 10) / 10) + (shortdw?shortdw:"");
  88. }
  89. if(pattern.indexOf("%") > 0){
  90. num = num * 100;
  91. }
  92. var fmtarr = pattern?pattern.split('.'):[''];
  93. var retstr='';
  94. //先对数据做四舍五入
  95. var xsw = 0;
  96. if(fmtarr.length > 1){
  97. xsw = fmtarr[1].length;
  98. }
  99. var bl = 1;
  100. for(i=0; i<xsw; i++){
  101. bl = bl * 10;
  102. }
  103. num = num * bl;
  104. num = Math.round(num);
  105. num = num / bl;
  106. var strarr = num?num.toString().split('.'):['0'];
  107. // 整数部分
  108. var str = strarr[0];
  109. var fmt = fmtarr[0];
  110. var i = str.length-1;
  111. var comma = false;
  112. for(var f=fmt.length-1;f>=0;f--){
  113. switch(fmt.substr(f,1)){
  114. case '#':
  115. if(i>=0 ) retstr = str.substr(i--,1) + retstr;
  116. break;
  117. case '0':
  118. if(i>=0) retstr = str.substr(i--,1) + retstr;
  119. else retstr = '0' + retstr;
  120. break;
  121. case ',':
  122. comma = true;
  123. retstr=','+retstr;
  124. break;
  125. }
  126. }
  127. if(i>=0){
  128. if(comma){
  129. var l = str.length;
  130. for(;i>=0;i--){
  131. retstr = str.substr(i,1) + retstr;
  132. if(i>0 && ((l-i)%3)==0) retstr = ',' + retstr;
  133. }
  134. }
  135. else retstr = str.substr(0,i+1) + retstr;
  136. }
  137. retstr = retstr+'.';
  138. // 处理小数部分
  139. str=strarr.length>1?strarr[1]:'';
  140. fmt=fmtarr.length>1?fmtarr[1]:'';
  141. i=0;
  142. for(var f=0;f<fmt.length;f++){
  143. switch(fmt.substr(f,1)){
  144. case '#':
  145. if(i<str.length) retstr+=str.substr(i++,1);
  146. break;
  147. case '0':
  148. if(i<str.length) retstr+= str.substr(i++,1);
  149. else retstr+='0';
  150. break;
  151. }
  152. }
  153. var r = retstr.replace(/^,+/,'').replace(/\.$/,'');
  154. if(pattern.indexOf("%") > 0){
  155. r = r + "%";
  156. }
  157. if(shortdw){
  158. r = r + shortdw;
  159. }
  160. if(negative){
  161. r = "-" + r;
  162. }
  163. return r;
  164. }
  165. /**
  166. * 对于散点图的ToolTip,如果值相同,会覆盖后面的点,现在通过第一个点抓出值相同的所有点,显示再 tooltip中
  167. * @returns
  168. */
  169. export const scatterTooltip = (option, params)=>{
  170. var target = {x:params.data[0], y:params.data[1], name:params.data[2]};
  171. var dts = option.series[params.seriesIndex].data;
  172. var r = [];
  173. for(let k=0; k<dts.length; k++){
  174. var t = dts[k];
  175. if(t[0] == target.x && t[1] == target.y){
  176. r.push(t[2]);
  177. }
  178. }
  179. return r.join(",");
  180. }
  181. /**
  182. 配置气泡大小
  183. 转换到 10 到 50
  184. **/
  185. export const bubbleSize = (maxval, minval, val, targetMax)=>{
  186. if(maxval == minval){
  187. return 40;
  188. }
  189. if(!targetMax){
  190. targetMax = 50;
  191. }
  192. var r = (targetMax-10)/(maxval-minval)*(val-minval)+10;
  193. return r;
  194. }
  195. export const converMapData2 = (name, value) => {
  196. var geoCoordMap = cityPosJson;
  197. var res;
  198. var geoCoord = geoCoordMap[name];
  199. if (geoCoord) {
  200. res = geoCoord.concat(value);
  201. }
  202. return res;
  203. };