数据可视化丨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>
    

最后效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值