echarts 柱状图成交金额数字格式化

浪淘沙2年前前端710
<div id="main"></div>    
<script type="text/javascript">    
var myChart = echarts.init(document.getElementById('main'));    
var option = {    
grid: {    
x: 80,    
x2: 10,    
y2: 100,    
borderWidth: 1    
},    
title: {    
text: '最近30天每日成交金额',    
left: 'center'    
},    
tooltip: {    
trigger: 'axis',    
formatter: function (params) {    
return params[0].seriesName + '<br/>' +    
params[0].name + ': ' + params[0].value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + ' 元';    
}    
},    
xAxis: {    
type: 'category',    
axisLabel: { alignWithLabel: true, rotate: -90 },    
axisPointer: {    
type: 'shadow'    
},    
data: ['2024/8/22 ','2024/8/21 ','2024/8/20 ','2024/8/19 ','2024/8/18 ','2024/8/17 ','2024/8/16 ','2024/8/15 ','2024/8/14 ','2024/8/13 ','2024/8/12 ',]    
},    
yAxis: {    
type: 'value'    
},    
series: [{    
name: '金额',    
type: 'bar',    
label: {    
normal: {    
show: true,    
position: 'top',    
formatter: function (params) {    
// 格式化金额,保留两位小数,并添加千分位分隔符    
return params.value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');    
}    
}    
},    
data: [156000.01,67960,280,13680,14240,16110,26520,80320,23920,59800,760,]    
}]    
};    
myChart.setOption(option);    
</script>


相关文章

layui 同时调用多个数据

<div class="layui-col-md6">     <div class="l...

asp.net code webapi layui ajax post表单数据

using System; using System.Collections.Generic; using System.Linq; using Syst...

layui 表单 label宽度

 <style>      .layui-form-label {     ...

layui form提交时,弹出确认框

layui form提交时,弹出确认框

<div class="container yx-form">     <form c...

layui 只有点击“导出Excel”按钮时,才改变“导出Excel”按钮的状态

<form class="layui-form layui-form-pane" method="post"> &n...

layui提交时,弹出一个确认对话框

<form class="layui-form" method="post" id="myForm"&g...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。