svg绘图、d3.js绘图工具、安装echarts、数据可视化项目

最新推荐文章于 2024-04-03 23:07:57 发布
最新推荐文章于 2024-04-03 23:07:57 发布
阅读量747 收藏 1
点赞数
文章标签： 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangyanqin2545/article/details/116377280
版权

一、svg 绘图

1.svg 概念

​ SVG 是使用 XML 来描述二维图形和绘图程序的语言。可伸缩矢量图，图像在放大或改变尺寸的情况下其图形质量不会有所损失。

命名空间：http://www.w3.org/2000/svg

2.svg 引入及基本操作

2.1svg 引入

	<!-- 默认宽300*150  -->
		<svg id="mySvg" width="400" height="400">

3.svg常见绘图标签

<rect> 绘制矩形 
        x,y 矩形绘制的起始位置、 
        width,height 矩形的宽高、
        fill颜色值 填充、
        stroke="颜色" 描边
        stroke-width 线宽 、
        rx，ry  圆角大小
    
<line>线 
		x1,y1  起始点 
		x2,y2   终点
	
<polyline> 折线 
        points 集合
            ="x1,y1  x2,y2  x3,y3 ..."
            ="x1 y1,x2 y2,..."
		
<circle>圆形 
		cx,cy,r 圆心和半径

<body>
		<!-- 默认宽300*150  -->
		<svg id="mySvg" width="400" height="400">
			
			<!-- 绘制一条线 -->
			<!-- <line x1="50" y1="50" x2="200" y2="50" stroke="#00f"></line> -->
			
			<!-- 绘制折线 -->
			<!-- <polyline points="50 50,100 100,150 50" stroke="#00f" fill="#fff"></polyline> -->
			<!-- 默认填充颜色 黑色  -->
			<polyline points="50,50 100,100 150,50" stroke="#00f" fill="transparent"></polyline>
			
			<!-- 绘制矩形 -->
			<rect x="50" y="200" width="200" height="100" fill="red"></rect>
			
			<!-- 绘制圆形 -->
			<circle cx="300" cy="50" r="50" fill="transparent" stroke="green"></circle>
			
		</svg>
	</body>

4.svg渐变效果

4.1linearGradient 线性 渐变

id       唯一标识
x1,y1    渐变起始的位置   百分比  或者  0-1 小数
x2，y2   渐变结束的位置


<!-- 默认宽300*150  -->
<svg id="mySvg" width="400" height="400">


    <defs>
        <!-- 定义渐变 参考使用渐变的图形 -->
        <linearGradient id="lg" x1="0%" y1="0%" x2="80%" y2="0%">
            <stop offset="0%" style="stop-color: paleturquoise;"></stop>
            <stop offset="50%" style="stop-color: peachpuff;"></stop>
            <stop offset="100%" style="stop-color: palegreen;"></stop>
        </linearGradient>

    </defs>

    <rect x="100" y="50" width="300" height="100" style="fill:url(#lg)"></rect>

</svg>

4.2radialGradient 放射性渐变

    id     唯一标识
    cx,cy  外圆圆心位置
    r      外圆半径
    fx,fy  内圆圆心


<defs>
    <radialGradient id="rg" cx="50%" cy="50%" r="50%" fx="80%" fy="50%" >
        <stop offset="0%" style="stop-color: paleturquoise;"></stop>
        <stop offset="100%" style="stop-color: peachpuff;"></stop>
    </radialGradient>

</defs>

<!-- <rect x="100" y="50" width="300" height="100" style="fill:url(#lg)"></rect> -->

<circle cx="200" cy="200" r="100" style="fill:url(#rg)"></circle>

二、d3.js绘图工具

1.d3工具概述

​ d3是数据可视化的操作的库，支持节点操作、事件操作、链式操作！！！

是一个js的库

2.工具安装及引入

npm init -y
npm install  d3@3

<script src="./node_modules/d3/d3.js" type="text/javascript" charset="utf-8"></script>

3.d3基本属性及方法

3.1元素选择

<script type="text/javascript">
    // console.log(d3);
    // 2.选择元素
    // select 选择一个元素
    // var p = d3.select("p")

    //selectAll 选择多个元素
    var p = d3.selectAll("p")
    console.log(p);

</script>

3.2样式及属性

<script type="text/javascript">
    // console.log(d3);

    // 2.选择元素
    // select 选择一个二元素
    // var p = d3.select("p")

    var p = d3.selectAll("p")
    console.log(p);

    // 3.操作样式
    p.style("width","200px").style("height","50px").style("background-color","red")

    // 4.元素内部添加内容
    p.text("今天周四")

    // 5.操作属性
    p.attr("id","id1")


</script>

3.3绑定数据

// 6.绑定数据 data datum
			
			// var msg= "web"
			// p.datum(msg).text((item,index)=>{
				
			// 	return item+index
			// })
			
			
			var arr=['王昭君',"后羿","瑶"]
			p.data(arr).text((item,index)=>{
				return item
			})

4.svg+d3绘制简易柱状图

代码案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1, 引入d3.js -->
		<script src="./node_modules/d3/d3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
			
		</div>
		
		<script type="text/javascript">
			let container = d3.select("#container")
			
			// 定义绘图的容器 svg
			let svg = container.append('svg')
			.style("width",400)
			.style("height",400)
			.style("border","3px solid #f00")
			
			let arr=[360,157,300,87,230,230,50]
			
			// enter() 数据个数 》实际元素个数 自动添加
			// exit() 
			svg.selectAll("rect")
			.data(arr)
			.enter()
			.append("rect")
			.attr("width",30)
			.attr("height",(item)=>{
				return item
			})
			.attr("x",(item,index)=>{
				return index*40
			})
			.attr("y",(item,index)=>{
				return 400-item
			})
			
			
	
		</script>
	</body>
</html>

三、安装echarts

1.安装

npm install echarts

2.引入

<!-- 1.引入echarts,js -->
		<script src="./node_modules/echarts/dist/echarts.js" type="text/javascript" charset="utf-8"></script>

3.获取容器并初始化

为 ECharts 准备一个具备大小（宽高）的 DOM

<!-- 2.为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;border:1px solid #f00"></div>


<script type="text/javascript">
    // 3.获取容器
    let main = document.getElementById("main");

    // 4.初始化绘图容器
    // console.log(echarts);
    let myecharts = echarts.init(main)

4.设置绘图选项

/ 5.设置值配置项
			var option = {
				title:{
					text:"课程",
					subtext:"web",
					// textAlign:"left"
				},
				// 信息提示框
				tooltip:{
					
				},
				// 图例组件
				legend:{
					data:["销量","人数"]
				},
				xAxis: {
					type: 'category',
					
					// data: ['web', 'java', 'php', 'python', '大数据', '电商', 'UI']
					data:[{
						value:"web",
						textStyle:{
							color:"#f00",
							fontSize:"30px"
						}
					},
					'java', 'php', 'python', '大数据', '电商', 'UI'
					]
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						name:"销量",
					},
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						name:"人数",
						}
					
					]
			};

5.绘图

    // 6.绘图
    myecharts.setOption(option)

四、数据可视化项目

1.项目分析

1.页面分析
	五个页面 首页 学生 教师 教室  课程
	三个公共组件 头部 列表 底部
2.创建项目
	
3.安装vue脚手架
	npm intsall -g vue-cli@xxx
4.初始化项目
	vue init webpack pro
5.创建组件

2.配置路由

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
import index from "@/views/index.vue"

export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // }
    {
      path:"/index",
      component:index
    },
    {
      path:"/teacher",
      component:()=>import("@//views/teacher.vue")
    },
    {
      path:"/student",
      component:()=>import("@//views/student.vue")
    },
    {
      path:"/course",
      component:()=>import("@//views/course.vue")
    },
    {
      path:"/classroom",
      component:()=>import("@//views/classroom.vue")
    },
    {
      path:"*",
      redirect:"/index"
    }
  ]
})

app.vue

<template>
  <div id="app">
    <vHeader></vHeader>
    <vList></vList>
    <router-view />
    <vFooter></vFooter>

  </div>
</template>

<script>
  import vHeader from "./components/header.vue"
  import vFooter from "./components/footer.vue"
  import vList from "./components/list.vue"

  export default {
    name: 'App',
    components:{
      vHeader,vFooter,vList
    }
  }
</script>

<style>

</style>

header.vue

<template>
  <div class="box">
      <router-link active-class="active" to="/index">首页</router-link>
      <router-link active-class="active" to="/student">学生数据</router-link>
      <router-link active-class="active" to="/teacher">教师数据</router-link>
      <router-link active-class="active" to="/classroom">教室数据</router-link>
      <router-link active-class="active" to="/course">课程数据</router-link>
  </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>
  .box{
    height: 60px;
    width: 100%;

    background-color: #545c64;
     line-height: 60px;

  }
  .box a{
     color:#fff;
     margin:0 20px
  }
  .box .active{
    color:#FFA500
  }
</style>

footer.vue

<template>
  <div class="box">
    版权所有 © 中公大学     京ICP备15006448号  京公网安备 110402430053 号
  </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>
  .box {
    position: fixed;
    left: 0;
    bottom: 0;

    height: 50px;
    width: 100%;

    background-color: #545c64;
    line-height: 50px;
    text-align: center;
    color: #fff;

  }
</style>

list.vue

<template>
  <div class="box">
      <div class="list" v-for="(item,index) in arr" :key="item.id">
        <div class="list-l" :style="{'background-color':item.bgColor}"></div>
        <div class="list-r">
          <div class="title">{{item.title}}</div>
          <div class="msg">{{item.msg}}</div>
        </div>
      </div>
  </div>
</template>

<script>
  export default {
        data(){
          return{
              arr:[
                {
                  id:1,
                  bgColor:"#008000",
                  title:"150",
                  msg:"课程设置总量"
                }
                // .....
              ]
          }
        },
        methods:{

        }
  }
</script>

<style scoped>
  .box{

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    /* align-content: space-around; */

    height: 160px;
   background-color: #e1e1e1;


  }
  .list{
    display: flex;

    width: 285px;
    height: 60px;

  }
  .list-l{
    flex:1;
    /* background-color: #00BB00; */

  }
  .list-r{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex:2;

    background-color: #fff;
    text-align: center;


  }
</style>

index.vue

<template>
  <div class="box">
    <div class="box-l" ref="student">

    </div>
    <div class="box-r" ref="teacher">
      
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    },
    mounted() {
      
    }

  }
</script>

<style scoped>
  .box {
    width: 100%;
    display: flex;
    justify-content: space-around;

    height: 450px;
    margin-top: 40px;
    /* background-color: #00BB00; */
  }

  .box-l,
  .box-r {
    width: 49%;
    background-color: #ddd;
  }
</style>

3.安装echarts工具

npm install echarts@4.9.0 --save

4.绘制图形

main.js

import echarts from "echarts"
Vue.prototype.$echarts = echarts

index.vue

methods: {
      drawStudent() {
        // 1.获取容器
        // let student = this.$refs.student
        // console.log(student);
        // 2.初始化绘图容器
        let student = this.$echarts.init(this.$refs.student)

        // 3.绘图配置项
        let option = {
          title:{
            text:"学生人数",
            subtext: '纯属虚构',
          },
          xAxis: {
            type: 'category',
            // 左侧的间距
            boundaryGap: true,
            data: ['web', 'java', 'php', 'python', '大数据', '电商', 'UI']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            // 面积样式
            areaStyle: {
              color:"#6495ed"
            },
            // 折线样式
            lineStyle:{
              color:"#ff6700"
            },
            //文字
            label:{
              show:true,
              position:"top"
            }

          }]
        }

        // 4,绘图
        student.setOption(option)
      },
      
      drawTeacher(){
        let teacher = this.$echarts.init(this.$refs.teacher)

        let options = {
            title: {
                text: '老师数据',
                subtext: '纯属虚构',
                left: 'left'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
              // 距离左侧的距离
                left: 'center',
            },
            series: [
                {
                    name: '学科',
                    type: 'pie',
                    //圆半径
                    radius: '70%',
                    data: [
                        {value: 1048, name: 'web'},
                        {value: 735, name: 'java'},
                        {value: 580, name: 'python'},
                        {value: 484, name: 'ui'},
                        {value: 300, name: '大数据'}
                    ],
                    // 选中时默认放大
                    emphasis: {
                      // 自定义样式 阴影
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        teacher.setOption(options)
      }
    },
    mounted() {
      // console.log(this.$echarts);
      this.drawStudent()
      this.drawTeacher()
    }
琴～～
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SVGEditor:最小的基于d3的SVG编辑器
05-15
#SVGEditor SVGEditor是一个最小JavaScript，基于d3的SVG编辑器（duh），可安装到SVG <path> ， <line>和其他对象中以使其可编辑。 它将更改直接复制到SVG DOM中，从而在浏览器中形成可下载的格式正确的SVG。 或至少它会在完成时显示！ 在帮助 粗略，早期的概念验证演示 ==== ＃＃记事本 可以添加其他工具，例如SVGEditor.Rotate和SVGEditor.Scale ，它们也可以执行path.setPoints() SVGEditor.Handle也可以生成和管理SVGEditor.Guide 可以使用svgeditor.snap（）扫描svg文档以捕捉目标 使用热键修改器提供x和y轴对齐 在svg.Editor.setTool（'Move'）中，接受键盘输入以获取距离并创建新节点 svg.Editor.setToo
js画图工具
04-10
js画图工具，支持正方形、圆形、折现、菱形画图，封装比较简单，需要用到的朋友可以自己扩展！
推荐13款JavaScript图形和图表绘制工具
rnifeasy
02-24 1030
导读：本文作者Kevin Liew是一名Web设计师和开发者，热衷于Web开发、前端开发以及jQuery。 如今，在互联网上发布在线免费的Javascript图形和图表绘制工具越来越多。作者此前在一家网站从事复杂的图形学方面的工作，使用highchart，在那期间，没有大量的插件工具可供选择，不像现在，我们可以轻易地找到非常有用的图表库。作者认为，此种插件的兴起源于： Flash 是最
D3JS 绘图工具
最新发布
Turn_to_empty的博客
04-03 543
D3绘图工具提纲
svg和D3.js
woyebuzhidao321的博客
02-27 903
像素图由一个个像素块组成，矢量图由多个数学公式绘制曲线组成，这样即使我们缩放，数学公式会重新计算，所以矢量图不会出现失真。 二、D3.js使用 https://d3js.org/ D3js 是一个可以基于数据来操作文档的 JvaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。 三、D3操作svg 四、D3绑定数据 五、绘制静态直方图
js 前端绘图工具
zx894554911的博客
10-27 645
根据乐吾乐提供的API文档，开发vue2.0版的项目代码
使用D3.js库绘制曲线图
04-11
D3.js，全称Data-Driven Documents，是一个强大的JavaScript库，专用于数据驱动的文档处理。...通过学习和理解这些文件，开发者可以进一步掌握D3.js库，从而制作出更多复杂且具有交互性的数据可视化作品。
精通D3.js交互式数据可视化高级编程
05-19
D3.js（Data-Driven Documents）是一个JavaScript库，由Mike Bostock开发，它允许开发者绑定任意数据到DOM（文档对象模型），并使用数据驱动的方法来操作DOM元素，实现复杂的数据可视化效果。 1. **D3.js基础** D3...
SiliconValleyCodeCamp-d3:D3.js数据可视化简介
05-05
D3.js（Data-Driven Documents）是一种强大的JavaScript库，专为创建数据驱动的Web可视化而设计。由Mike Bostock开发，它允许开发者利用SVG、Canvas或HTML来直接操作DOM（Document Object Model），并结合数据进行...
基于d3.js实现实时刷新的折线图
10-21
d3.js的核心思想是通过数据来操作文档，将数据与SVG元素关联起来，以实现动态可视化。 2. **SVG图形**：d3.js 使用SVG（Scalable Vector Graphics）作为其默认的图形绘制环境。SVG是一种矢量图形格式，支持缩放而...
JSPaint一个用JS实现类似于windows的画图工具
08-10
JS Paint一个用JS实现类似于windows的画图工具
强大的H5网页绘图工具chart.js
03-20
强大的H5网页绘图工具，可实时绘制曲线图，柱状图，雷达图等，实现数据可视化
纯JavaScript实现超级画图工具
04-30
纯JavaScript实现超级画图工具，功能强悍，能自动画图，并具有画图轨迹记忆功能。
纯JavaScript实现画图工具
04-30
页面简洁美观，画笔，橡皮擦等功能。画笔可选大小、样色，并可导出图片。
D3.js实现拓扑图的示例代码
10-18
在本文中，我们将深入探讨如何使用D3.js库来创建拓扑图，这是一个常用于数据可视化，特别是网络架构和系统关系展示的工具。D3.js（Data-Driven Documents）是一个强大的JavaScript库，允许开发者直接操作DOM...
13个JavaScript图表图形绘制插件
weixin_34258838的博客
02-23 588
现在网络上又有越来越多的免费的JavaScript图表图形绘制插件。我之前给一家网站做过复杂的图形，我们用的是 highchart。在那段时间，没有很多可供选择的插件。但现在不同了，很容易就可以找到很多功能非常不错的图表库。个人而言，此类插件的上升，是因为： 1. Flash 过去是最佳解决方案，但很多人多在从那迁移； 2. 现代浏览器及其更强大的计算能力，使其在转化绘制实时数据方面的能力更佳...
13款经典JavaScript图形和图表绘制工具
weixin_33805992的博客
02-27 210
如今，在互联网上发布在线免费的Javascript图形和图表绘制工具越来越多。作者此前在一家网站从事复杂的图形学方面的工作，使用highchart，在那期间，没有大量的插件工具可供选择，不像现在，我们可以轻易地找到非常有用的图表库。作者认为，此种插件的兴起源于： 　　Flash 是最佳的解决方案，大部分人从这方面迁移的; 　　现在的浏览器和强大的计算机使其在实时数据方面的...
JS实现简易画图工具
weixin_49826762的博客
11-15 2349
【Canvas】画布 Canvas为HTML5中新加入的标签， JS 可在上面进行绘画，Canvas一个矩形的单元。Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 绘制图形的步骤: 1、获取画布节点。 2、获取上下文(即在这个区域进行绘画)getContext。 3、使用 JavaScript 来进行绘制。 ****************************************************************下面用JS实现简易画图工具*******
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值