1、效果圖，圖中有資料值，x軸座標,y軸軸

2、程式碼

<template>
  <div id="mydiv">
    <!-- <svg>
      <rect></rect>
    </svg> -->
  </div>
</template>
<script>
import * as d3 from "d3";
export default {
  mounted(){
    this.getlist();
  },
  created(){
    // this.getlinear();
  },
  methods:{
    // getlinear(){},
    getlist(){
      //製作畫布
      let width = 400;//畫布寬度
      let height = 400;//畫布高度
      let svg = d3.select("body")
        .append("svg")
        .attr("width",width)
        .attr("height",height);
      //畫布周邊的空白
      let padding = {left:30, right:30, top:20, bottom:20};

      //定義一個數組
      let datas = [20,10,30,60,33,24,12,5];

      //定義座標軸比例尺
      //x軸比例尺
      let ranges = d3.range(datas.length)//ranges是datas陣列下標集合的一個數組
      /*注意:4版本後下面的這種用法好像不可以了
        var xScale = d3.scale.ordinal()
                       .domain(d3.range(datas.length))
                       .rangeRoundBands([0, width - padding.left - padding.right])
      */
      let xScale = d3.scaleBand()
                        .domain(ranges) //這裡裝的是一個數組
                        .range([0, width - padding.left - padding.right])

      //y軸比例尺
      let min = d3.min(datas);
      let max = d3.max(datas);
      let yScale = d3.scaleLinear()
                     .domain([0 , max])//值域範圍，即y軸的最大最小值
                     .range([height-padding.top-padding.bottom , 0]);
    
      //定義座標軸
      //X軸
      let xAxis = d3.axisBottom(xScale);
      //Y軸
      let yAxis = d3.axisLeft(yScale);    

      //矩形之間的空白
      let rectPadding = 4;
      //新增矩形元素
      let rects = svg.selectAll(".MyRect")
                     .data(datas)
                     .enter()
                     .append("rect")//新增矩形
                     .attr("class","MyRect")//新增類名
                     .attr("transform","translate("+padding.left+","+padding.top+")")//矩形的位置
                     .attr("x",function(d,i){//生成的矩形距離畫布左側的距離
                        return xScale(i) + rectPadding/2;
                     })
                     .attr("y",function(d){//生成的矩形距離畫布頂部的距離
                        return yScale(d);
                     })
                     .attr("width",xScale.bandwidth() - rectPadding )//根據比例尺來計算出矩形的寬度
                     .attr("height",function(d){
                        return height - padding.top -padding.bottom - yScale(d);//畫布高度-距離頂部-距離底部-矩形距離頂部的高算出矩形的高度
                     })
                     .attr("fill","steelblue");//矩形顏色
      //新增文字元素
      let texts = svg.selectAll(".MyText")
                     .data(datas)
                     .enter()
                     .append("text")//新增圖形資料
                     .attr("class","MyText")
                     .attr("transform","translate("+padding.left+","+padding.top+")")
                     .attr("x",function(d,i){
                        return xScale(i) + rectPadding/2;
                     })
                     .attr("y",function(d){
                        return yScale(d);
                     })
                     .attr("dx",function(){//文字距離矩形左邊的距離
                        return (xScale.bandwidth() - rectPadding*5)/2;
                     })
                     .attr("dy",function(d){//文字距離矩形頂部的距離
                        return 0;
                     })
                     .text(function(d){
                        return d;
                     })
      
      //新增座標軸元素
      //新增X軸
      svg.append("g")
         .attr("class","axis")
         .attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")
         .call(xAxis)
      //新增Y軸
      svg.append("g")
         .attr("class","axis")
         .attr("transform","translate("+padding.left+","+padding.top+")")
         .call(yAxis) 
    },
  },
};
</script>
<style lang="sass" scoped>

</style>