Vue2尚硅谷后台管理系统自学笔记
文章目录
一、数据可视化
1、canvas
- 大小设置
<!-- 不支持css样式,样式修改不了画布的宽高，只能在标签中设置，可以不用加单位 -->
<canvas width="700" height="800"></canvas>
- 获取上下文
let canvas = document.querySelector('canvas');
// 获取canvas中的上下文
let ctx = canvas.getContext('2d');
- 绘制线段
// 绘制线段
// 起点设置
ctx.moveTo(50, 50);
// 设置其他带点，连线顺序是由上到下
ctx.lineTo(50, 100);
ctx.lineTo(100, 50);
// 设置图像的填充的颜色
ctx.fillStyle = "red";
ctx.fill();
// 设置线段的颜色和宽度
ctx.strokeStyle = 'purple';
ctx.lineWidth = "10";
// 可以设置起点与终点连接在一起
ctx.closePath();
// stroke方法绘制线段
ctx.stroke();
- 绘制矩形
// 绘制矩形 参数 x,y,w,h 矩形的位置：x,y,宽度：w,h
// 第一种方法：
ctx.strokeRect(100, 200, 100, 100);
// 第二种：可以填充颜色
ctx.fillStyle = 'skyblue';
ctx.fill();
ctx.fillRect(300, 100, 100, 100);
- 绘制圆形
// 绘制圆形
ctx.beginPath();
// 绘制圆形的方法：x ,y,r,起始弧度,结束弧度,是否逆时针绘制true逆时针，false顺时针
// 2*PI*弧度=360 1弧度=57°左右
ctx.arc(400, 400, 50, 0, 1 * Math.PI, false);
// 设置填充颜色
ctx.fillStyle = 'red';
ctx.fill();
// 绘制圆形
ctx.stroke();
- 擦除画布
// 擦除画布 (x,y,清除的w,清除的h)
ctx.clearRect(0, 0, 600, 400);
// 清除部分画布
ctx.clearRect(100, 200, 50, 100);
- 绘制文字
// 设置文字大小、颜色
ctx.font = '20px 微软雅黑';
ctx.fillStyle = 'red';
// 绘制文字 (文字，x,y)
ctx.fillText('数据可视化', 50, 20);
2、svg矢量图绘制
此节也较为简单，且和上面相似，直接上代码吧，一看就懂
<!-- svg可以使用类名 -->
<svg class="box">
<!-- x和y就是点的坐标，stroke设置线条颜色-->
<!-- fill属性：设置填充颜色，fill-opacity:设置填充颜色透明度 -->
<!-- 画直线 -->
<line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
<!-- 画折现 ：多个点坐标用逗号隔开-->
<polyline points="300 300,50 100,120 400" fill-opacity="0" stroke="blue"></polyline>
<!-- 绘制矩阵 -->
<rect x="400" y="400" width="150" height="50"></rect>
<!-- 绘制圆形|椭圆 -->
<circle cx="300" cy="96" r="50" style="fill:black"></circle>
<ellipse cx="500" cy="500" rx="100" ry="50" style="fill:black"></ellipse>
<!-- 多边形 -->
<polygon points="600 100,300 400,750 100" stroke="red" fill-opacity="0"></polygon>
<!-- 绘制任意图形 -->
<!-- M：起点 L：点 Z：首尾连接 -->
<path fill-opacity="0" stroke="red" d="
M 10 10
L 20 400
L 30 300
L 40 200
L 50 500
Z"></path>
3、echarts的基本使用
基本使用步骤：
- 引入echarts依赖包（bootCDN）
<!-- 引入echarts依赖包 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.js"></script>
- 准备一个容器
<!-- 准备容器 -->
<div class="box"></div>
- 对该容器初始化echarts
// 基于准备好的DOM初始化echarts实例
let dom = document.querySelector('.box');
// 初始化echarts
let mycharts = echarts.init(dom);
- 配置相关配置项
// 指定图标的配置项和数据等
mycharts.setOption({
...})
- 每个图表对应一个容器和他自己的配置项（即想要创建多个图标，需要重复1-4步骤）
- 在一个容器上画出多种类型的图表（series: []，配置项中每个对象对应一种图表）
完整html和js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 映入echarts依赖包 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<!-- 准备容器 -->
<div class="box"></div>
</body>
</html>
<script>
// 基于准备好的DOM初始化echarts实例
let dom = document.querySelector('.box');
// 初始化echarts
let mycharts = echarts.init(dom);
// 指定图标的配置项和数据等
mycharts.setOption({
// 图表的标题相关配置
title: {
// 主标题设置
text: '数据可视化',
// 主标题的样式
textStyle: {
color: 'red'
},
// 小标题
subtext: 'echarts基本使用',
// 小标题的样式
subtextStyle: {
color: 'blue'
},
// 设置标题的位置
left: 'center'
},
// x周的相关配置项
xAxis: {
// 数据名
data: ['衣服', '直播', '游戏', '电影']
},
// x周的相关配置项
yAxis: {
// 显示y轴线
axisLine: {
show: true,
},
// 显示y刻度
axisTick: {
show: true,
}
},
// 其他相关配置：图标类型、数据量等
series: [
// 每个对象代表一个图表
// 柱状图
{
// 图表类型:bar(柱状图)、pie(饼状图)、line(折线图)、scatter(散点图)
type: 'bar',
// 图表的数据
data: [10, 20, 30, 40],
color: 'blue'
},
// 饼图
{
type: 'pie',
// 饼图的数据可以设置名字对应对象
data: [
{
name: 'a', value: 10 },
{
name: 'b', value: 30 },
{
name: 'c', value: 40 },
],
// 可以设置饼图的宽、高、半径、位置
width: 150,
height: 150,
left: 150,
top: 100,
radius: 15,
},
// 折现图
{
type: 'line',
data: [10, 20, 30, 40, 10, 20, 30, 40],
color: 'red'
}
]
})
</script>
4、echarts其他配置：
- 数据集dataset（可以统一定义数据）
// 配置数据
let data = [
['衣服', 10, 28, 'x', 33],
['直播', 30, 39, 'y', 12],
['游戏', 4, 46, 'z', 20],
['电影', 50, 77, 't', 55],
]
注：dataset是配置项，需要写在setOption中
// 设置数据集
dataset: {
// 数据源
source: data
},
注：encode相当于每个图的data，所以是写在配置项series中，每个图只有一个encode数据
// 设置数据
encode: {
// y轴数据，是数据集的第几列（列数从0开始）
y: 1,
}
// 饼图的数据，需要有名字和数据
encode: {
itemName: 3,
value: 4
}
5、echarts其他组件
- 提示框
// 提示框
tooltip: {
textStyle: {
color: 'red'
}
},
- 切换图标类型
// 切换图标类型
legend: {
data: ["柱状图", "饼图", "折线图"]
},
- 图表的右上角缩放等按钮
// 对图表的缩放等按钮的操作
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: "none"
},
dataView: {
readOnly: false
},
magicType: {
type: ["line", "bar"]
},
restore: {
},
saveAsImage: {
}
}
},
- 区域缩放
// 区域缩放
dataZoom: [
// x轴
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
// y轴
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
- 调增图表布局，相对画布的位置
// 调增图表布局
grid: {
left: 20,
top: 20
}
6、双坐标系
1、其实就是在将配置项xAxis或yAxis写成数组
2、然后数组中添加对象，每个对象代表一个坐标系，两个对象：左右坐标系。
yAxis: [
{
// 显示y轴线
axisLine: {
show: true,
},
// 显示y刻度
axisTick: {
show: true,
}
},
{
// 显示y轴线
axisLine: {
show: true,
},
// 显示y刻度
axisTick: {
show: true,
},
}
],
3、配置图表对应左右哪个坐标：yAxisIndex: 0，（0是yAxis的坐标索引）
注：yAxisIndex写在一个配置项series的对象里。
二、Home首页开发
1、顶部四个数据card
- 展现效果
- 思路：
（1）在主页路由大组件里，创建出头部Card子组件作为头部的大容器。
（2）在大Card中容器中,后三个小card所展示的charts图表都有自己的组件，如图：
（3）Detail组件作为存放内容的主要组件，一个小card的结构在Detail组件中。
（4）具体每个card的内容不同，是通过在Card的index中使用具名插槽将不同内容插入形成。 - 代码如下：
- dashboard组件（首页容器）
<template>
<div>
<Card />
</div>
</template>
<script>
import Card from "./Card";
export default {
name: "Dashboard",
components: {
Card,
},
};
</script>
- Card组件
<template>
<div>
<el-row :gutter="10">
<!-- 第一个card -->
<el-col :span="6">
<el-card>
<Detail title="总销售额" count="￥ 126560">
<template slot="charts">
<span>周同比 56.67%</span>
<i class="el-icon-caret-top" style="color: rgb(225, 54, 20)"></i>
<span>日同比 19.16%</span>
<i
class="el-icon-caret-bottom"
style="color: rgb(37, 207, 56)"
></i>
最低0.47元/天 解锁文章
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
