echart带有价格的时候,价格数据3位数用逗号分隔

来源:互联网 发布:mysql dialect 编辑:程序博客网 时间:2024/06/09 15:35
     
操作echart的时候,当包含价格的时候,价格的数据全部显示,需求要求3位数一截取,如下:
图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