数据可视化丨Vue安装及使用

安装参考：NodeJS+Vue+Element-Ui/Plus+Axios+Vue-router+vuex 详细下载、安装、创建项目、引入_书启秋枫的博客-CSDN博客

1.nodejs安装及npm下载

nodejs是什么？nodejs是一个事件驱动I/O服务端JavaScript环境，目的是前后端完全分离。

网址：Download | Node.js

 Binary要解压到node_modules文件夹中。

2.调试Server.js

var http=require("http");
http.createServer(function(request,response){
    //发送HTTP头部
    //HTTP状态值：200：OK
    //内容类型：text/plain
    response.writeHead(200,{'Content-Type':'text/plain'});
    //response.write('Hello World\n');
    //发送响应数据 Hello World
    response.end('Hello World\n');
}).listen(8888);
//终端打印
console.log('Server running at http://127.0.0.1:8888/');

在终端中，用 node server.js 启动，在终端和网页中显示如下：

终端：

网页：

3.Vue安装

Vue是什么？Vue是一个新型前端构建工具，主要有两部分：一个开发服务器，和一套构建指令。

•  npm install vue ——安装vite包
•  npm init vite-app hellovue ——创造工程
• npm run dev ——运行

4.创建一个Vue+D3随机数直方图项目

用yarn构建项目：从 Vite 与 Vue 开始的 D3 数据可视化之旅 - 云游君的小站

配色方案：D3 配色方案篇_d3 颜色_BBEter的博客-CSDN博客

参考线及坐标轴：D3学习篇-直方图_d3直方图_ly2230976595的博客-CSDN博客

<template>
    <h2><a href="https://d3js.org" target="_blank">随机数直方图</a></h2>
    <div id="barchart-container"></div>
  </template>
  
  <script>
    import { defineComponent } from 'vue';
    import * as d3 from "d3";

    var data=new Array(20);
    var data_x=new Array(20);
    for (var i=0;i<20;i++)
    {
        data[i]=Math.floor(Math.random()*255);  
        data_x[i]=i+1;         
        console.log(data_x[i]+":"+data[i]);
    }
    var color=d3.schemePastel2;

    export default defineComponent({
        mounted() {      
            this.drawBarChart(data);      
        },
        methods:{
            drawBarChart(data){
                var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
                var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
                w=w*0.6;
                h=h*0.5;

                //x轴宽度
                var xAxisWidth = 400;
                
                //y轴宽度
                var yAxisWidth = 300;
                
                var padding = { top: 30 , right: 30, bottom: 30, left: 30 };

                //x轴比例尺
                var xScale = d3.scaleBand()
                                .domain(d3.range(data_x.length))
                                .range([0,w-padding.right]);
                
                //y轴比例尺
                var yScale = d3.scaleLinear()
                                .domain([0,d3.max(data)])
                                .range([0,yAxisWidth]);

                var svg=d3.select("#barchart-container")
                            .append("svg")
                            .attr("width",w)
                            .attr("height",h);

                svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("fill",(d,i)=>color[i%8])
                .attr("x",function(d,i){
                    return padding.left + + xScale(i);
                })
                .attr("y",function(d,i){
                        return h-padding.bottom-data[i];
                    })
                .attr("height",d=>d)
                .attr("width",xScale.bandwidth());

                // //draw axios
                
                var xAxis = d3.axisBottom(xScale);
                    
                yScale.range([h,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 - h) +  ")")
                        .call(yAxis);

            }
        }
    })
    </script>
    

最后效果：