vue 四舍五入的函数

1.想把一个小时四舍五入 以前使用.toFixed(2) 方法  但是有一个问题 他是五舍六入 不符合需求  所以现在  需要使用math.ceil()

2. math.ceil()

const changeTwoDecimal = (x) => {
  let resNum = parseFloat(x);
  // isNaN(),判断一个变量是否为非数字的类型,非数字返回true,数字则返回false
  // console.log('你看=', isNaN(resNum))
  if (isNaN(resNum)) {
    console.log("function:changeTwoDecimal->parameter error");
    return false;
  }
  resNum = Math.round(resNum * 100) / 100;
  return resNum;
};

 

以下是一个示例的Vue工程代码,用于展示2020年各地区订单消费额的中位数: ```vue <template> <div> <h1>2020年各地区订单消费额中位数</h1> <div id="chart"></div> </div> </template> <script> import * as d3 from "d3"; import axios from "axios"; export default { data() { return { amounts: [], // 存储订单消费额的数组 }; }, mounted() { this.fetchData(); }, methods: { fetchData() { axios .get("your_api_endpoint") // 替换为实际的接口地址 .then((response) => { this.amounts = response.data.map((x) => x.finalTotalAmount); this.plotChart(); }) .catch((error) => { console.error(error); }); }, plotChart() { const svg = d3.select("#chart") .append("svg") .attr("width", 800) .attr("height", 500); const margin = { top: 20, right: 30, bottom: 30, left: 50 }; const width = +svg.attr("width") - margin.left - margin.right; const height = +svg.attr("height") - margin.top - margin.bottom; const g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 对订单消费额数组进行排序 this.amounts.sort((a, b) => a - b); // 计算中位数 const mid = Math.floor(this.amounts.length / 2); const median = this.amounts.length % 2 === 0 ? (this.amounts[mid - 1] + this.amounts[mid]) / 2 : this.amounts[mid]; // 四舍五入保留两位小数 const roundedMedian = Math.round(median * 100) / 100; // 根据降序排列,获取地区名称和订单消费额的数组 const data = response.data.sort((a, b) => b.finalTotalAmount - a.finalTotalAmount) .map((x) => ({ region: x.regionName, amount: x.finalTotalAmount })); // 创建柱状图 const x = d3.scaleBand() .rangeRound([0, width]) .padding(0.1) .domain(data.map((d) => d.region)); const y = d3.scaleLinear() .rangeRound([height, 0]) .domain([0, d3.max(data, (d) => d.amount)]); g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .call(d3.axisLeft(y).ticks(10)) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("消费额"); g.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", (d) => x(d.region)) .attr("y", (d) => y(d.amount)) .attr("width", x.bandwidth()) .attr("height", (d) => height - y(d.amount)) .attr("fill", "steelblue"); // 添加中位数标签 g.append("text") .attr("x", width - 20) .attr("y", y(roundedMedian) - 10) .text("中位数: " + roundedMedian); }, }, }; </script> <style scoped> #chart { margin-top: 20px; } </style> ``` 请将代码中的"your_api_endpoint"替换为实际的接口地址,该接口应返回一个JSON数组,包含地区名称(regionName)和订单消费额(finalTotalAmount)的数据。 这段代码使用了d3.js库来创建柱状图,并使用axios库来进行HTTP请求获取数据。在mounted钩子函数中,调用fetchData方法来获取数据,并在获取数据后调用plotChart方法绘制柱状图。最后,将中位数标签添加到图表中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值