vue +D3(v7b版本）考研人数直方图

最新推荐文章于 2024-09-11 08:27:58 发布

原创最新推荐文章于 2024-09-11 08:27:58 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #java #前端

该代码示例展示了如何在Vue组件中利用D3.js库创建一个柱状图，展示近十年考研录取人数，单位为百万人。通过调整比例尺和坐标轴，渲染出数据图表，并提供了数据提示功能。

代码

<template>
  <h2><a href="https://d3js.org" target="_blank" >近年录取人数考研</a></h2>
  <h3 style="text-align: right;">单位：百万人</h3>
  <h3 style="text-align: left;">20数科</h3>
  <div id="bar-chart-container"></div>
</template>

<script>

import { defineComponent } from 'vue';
//import axios from "axios";
import * as d3 from "d3";
var w=window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

    var h=window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
    w=w*0.98;
    h=h*0.98;
    var data = [49.46,52.13,54.9,54.87, 57.06,58.98, 72.22,76.25,81.13, 99.05,105.07,110.7, 76.17]
    var year=["2011","2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022","2023"]        
var color=d3.schemeCategory10;
 w = 1200;	//SVG绘制区域的宽度
 h = 500;
export default defineComponent({
  mounted() {      
      this.drawBarChart(data);      
  },
  methods:{
      drawBarChart(data){
          var svg=d3.select("#bar-chart-container")
                      .append("svg")
                      .attr("width",w)
                      .attr("height",h);
         
var xAxisWidth =w;
 
 //y轴宽度
 
 
 //y轴宽度
 var yAxisWidth = h;
       
 //x轴比例尺
 var xScale = d3.scaleBand()
         .domain(year)
         .range([0,xAxisWidth]);
  
 //y轴比例尺
 var yScale = d3.scaleLinear()
         .domain([0,200])
         .range([0,yAxisWidth]);			
   
 //外边框
 var padding = { top: 30 , right: 30, bottom: 30, left: 30 };

 

var xAxis = d3.axisBottom(xScale);
yScale.range([yAxisWidth,0]);
                
        var yAxis = d3.axisLeft(yScale);
                
                
        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate(" + padding.left + "," + (h- padding.bottom) +  ")")
            .call(xAxis);
              
        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate(" + padding.left + "," + (h - padding.bottom - yAxisWidth) +  ")")
            .call(yAxis); 
          
        
 var tips = svg.append("g")
         .attr("class","tips")
         .style("display","none")
         .style('font-size', '10px')
         .style('font-weight', 'bold')
       tips.append("text")
         .attr("x",8)
         .attr("dy",".75em")
           svg.selectAll("rect")
             .data(data)
             .enter()
             .append("rect")
             .attr("fill",(d,i)=>color[i%10])
             .attr("x",function(d,i){
                 return w*i/data.length+30;
             })
             .attr("y",d=>(h-3*d*0.85-30))
             .attr("height",d=>3*d*0.85)
             .attr("width",w*0.9/data.length);

          svg.selectAll("text-value")
             .data(data)
             .enter()
             .append("text")
             .attr("x",function(d,i){
                 return 50+w*i/data.length;
             })
             .attr("y",d=>(h-3*d*0.85-30))
             .text(function(d){
                  return d;
              });
      }
  }
})
</script>