编写Vue工程代码，根据接口，用柱状图展示2020年各地区所有订单消费额的中位数（降序排列，若有小数则四舍五入保留两位）

以下是一个示例的Vue工程代码，用于展示2020年各地区订单消费额的中位数：

<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方法绘制柱状图。最后，将中位数标签添加到图表中。