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

浪淘沙2年前前端739
<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

//第一个实例   table.render({       elem: '#xxt-tbl...

layui select 下拉多选 xm-select

<div class="layui-fluid">     <div id="demo1&...

删除确认对话框

onclick=\"onconfirm('确认要删除本岗位?', 'zp', 'id=&act=del');&nb...

layui 横排 前后说明 排版代码

layui 横排 前后说明 排版代码

<div class="layui-form-item">     <div class="...

echarts获取点击事件,详细参数

myChart.on('click', (params) => {    console.log(`你点击了系列 ${params.name}`); ...

发表评论    

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