echart带有价格的时候,价格数据3位数用逗号分隔
来源:互联网 发布:mysql dialect 编辑:程序博客网 时间:2024/06/09 15:35
操作echart的时候,当包含价格的时候,价格的数据全部显示,需求要求3位数一截取,如下:
图1:
图2:
解决方案:
代码展示:
=======2016/12/6补充
获取的价格分为两种格式,一种获取的时候就带有"."小数点2位,一种是直接整数的形式展示,但是也要就是千位符的截取,上面讲解的是带有小数点的,下面是没有小数点的。
注:关键点在var num_array = a.data.toFixed(2).split('.');上,其中a.data.toFixed(2)是给数据加上小数点并给数据添加小数点后两位数。
图1:
图2:
解决方案:
代码展示:
<script type="text/javascript">document.getElementById("begin3").flatpickr(); document.getElementById("end3").flatpickr();function getChartData3() { var myChart3 = echarts.init(document.getElementById('mychart3')); myChart3.showLoading({ text : "图表数据正在努力加载..." });//投标人中标金额统计分析var options3 = {title : {text : '投标人累积中标金额排前十的数据统计(金额:万元)',x : 'center'},tooltip : {trigger : 'axis',axisPointer : { // 坐标轴指示器,坐标轴触发有效type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'}},toolbox: { show : true, x:'950',//下载的字体显示不全 feature : { //dataView : {show: false, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, //restore : {show: true}, saveAsImage : {show: true} } },/* legend : {data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]}, */grid : {y2: 140},xAxis : {type : 'category',name : '投标人',data : [ '' ],axisLabel:{ interval:0,//横轴信息全部显示 rotate:-30,//-30度角倾斜显示}},yAxis : {type : 'value',name : '金额:万元',},series: [{name : '万元',type : 'bar',stack : '万元',label : {normal : {show : true,position: 'top',formatter:function(a,b,c){var result = [ ], counter = 0;var num_array = a.data.split('.');var num = num_array[0];var newstr = ''; for (var i = num.length - 1; i >= 0; i--) { counter++; result.unshift(num[i]); if (!(counter % 3) && i != 0) { result.unshift(','); } } if(num_array.length>1){ newstr = result.join(''); newstr += '.'+num_array[1]; return newstr; }else{ return result.join(''); } },},},data : [ '' ],color:['#0087ED'],itemStyle: {normal: {barBorderRadius: 5,}},barWidth: 30,}]};myChart3.setOption(options3);//获得图表的options对象 var newOption3 = myChart3.getOption();//参数var startDate = $("#begin3").val();var endDate = $("#end3").val();var type = $("#jylx-type3").val();if(type==null || type=="" || type=="undefine"){ type = "${type}"; }var centerCode = $("#jyzx-all3").val(); //ajax方式获取投标人中标金额统计分析柱状图的数据 $.ajax({ type : "post", async : true, //异步执行 url : "bidder!zbjeBar.do", data : {startDate: startDate, endDate: endDate, type: type,centerCode:centerCode}, dataType : "json", //返回数据形式为json success : function(data) {if (data) {newOption3.xAxis[0].data = data.category;newOption3.series[0].data = data.series;myChart3.hideLoading();myChart3.setOption(newOption3);}},error : function(errorMsg) {alert("图表请求数据失败啦!");myChart3.hideLoading();}}); }//根据查询条件加载柱图function showChart3() {getChartData3();}</script>
=======2016/12/6补充
获取的价格分为两种格式,一种获取的时候就带有"."小数点2位,一种是直接整数的形式展示,但是也要就是千位符的截取,上面讲解的是带有小数点的,下面是没有小数点的。
var options5 = {title: { text: '中标价格区间偏好分析', x : 'center', // textAlign:'center',// padding: [// 10, // 上// 0, // 右// 0, // 下// 300, // 左// ], textStyle: { color: '#000000' }, }, toolbox: { show : true, x:'850',//下载的字体显示不全 feature : { dataView : {show: false, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, // restore : {show: true}, saveAsImage : {show: true} } },tooltip : {trigger : 'axis',axisPointer : { // 坐标轴指示器,坐标轴触发有效type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'}},/* legend : {data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]}, */grid : {left : '1%',right : '10%',bottom : '3%',containLabel : true},xAxis : {type : 'category',//x:'450',name : '单位:万元',data : [ '' ],axisLine:{ lineStyle:{ color:'#AE5DA0', width:1,//这里是为了突出显示加上的 } }},yAxis : {type : 'value',name : '单位:次',splitLine: { lineStyle: { // 使用深浅的间隔色 color: ['#AE5DA0'] }},nameTextStyle: {color: ['#AE5DA0']},axisLine:{ lineStyle:{ color:'#AE5DA0', width:1,//这里是为了突出显示加上的 } }},series : [ {name : '中标次数',type : 'bar',stack : '总量',label : {normal : {show : true,position: 'top', formatter:function(a,b,c){var result = [ ], counter = 0;var num_array = a.data.toFixed(2).split('.');var num = num_array[0];var newstr = ''; for (var i = num.length - 1; i >= 0; i--) { counter++; result.unshift(num[i]); if (!(counter % 3) && i != 0) { result.unshift(','); } } return result.join(''); if(num_array.length>1){ newstr = result.join(''); newstr += '.'+num_array[1]; return newstr; }else{ return result.join(''); } }, }},data : [ '' ],color:['#AE5DA0'],itemStyle: {normal: {barBorderRadius: 5,}},barWidth: 30}]};
注:关键点在var num_array = a.data.toFixed(2).split('.');上,其中a.data.toFixed(2)是给数据加上小数点并给数据添加小数点后两位数。
0 0
- echart带有价格的时候,价格数据3位数用逗号分隔
- iOS 在价格数字中插入分隔符,逗号,点之类的方法和代码
- 价格折扣的小数位数显示
- iPad 3的价格
- java中价格的数字中间有逗号的处理
- Java中价格的数字中间有逗号的处理
- java中价格的数字中间有逗号的格式化
- C#把txt的数据导入excel,用逗号分隔
- 笔试:解析用逗号分隔的输入数据
- mysql:find_in_set 查找逗号分隔的数据
- 逗号分隔数据替换
- [ZT]当避孕套价格超过内裤的时候
- 在onfancy index 价格时候报错的处理
- 比特币价格今日的价格
- 3D游戏引擎Unreal的价格
- 用程序实现更新PO的价格
- 知识产权的价格
- 开盘价格的意义
- Android开发基础 -- tools:context=".MainActivity" 的作用
- dynamic web module version版本之间的区别
- [RK3288][Android6.0] 调试笔记 --- 修改boot.img后进入Recovery模式问题
- 2016.11.30 调整iframe中镶嵌的页面
- caffe使用自带的工具绘制accuracy和loss曲线
- echart带有价格的时候,价格数据3位数用逗号分隔
- Runc容器生命周期
- 进程间的通信之管道
- 安装 python-redis模块
- Verilog中 reg和wire 用法和区别以及always和assign的区别
- ShareSDK遇到的问题
- 全面解析HTTP(二)
- 浮点数的二进制表示
- websocket入门指南