当前位置：首页 > news >正文

数据可视化-canvas-svg-Echarts

news 2025/9/14 14:17:21

数据可视化

技术栈

canvas

<canvas width="300" height="300"></canvas>

当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。切记不能通过样式去设置画布的宽度与高度
宽高必须通过属性设置，如果使用样式设置，会导致画布内的坐标出现问题
给canvas画布添加文本内容、子节点没有任何意义
浏览器认为canvas标签是一张图片，右键可保存图片
你想操作canvas画布：画布当中绘制图形、显示一个文字，都必须通过JS完成

获取上下文

const canvas = document.querySelector('canvas');
// 获取canvas的上下文 相当于笔
const ctx = canvas.getContext('2d');

绘制线段

1.线段的起点 x,y
ctx.moveTo(100,100);
2.其他点
ctx.lineTo(100,200);
ctx.lineTo(200,100);

3.绘制线段
ctx.stroke();

4.图形的填充颜色
ctx.fillStyle = 'red';

5.填充
ctx.fill();

6.线段的颜色，宽度
ctx.strokeStyle = 'blue';
ctx.lineWidth = '5';
7.将起点和终点连接
ctx.closePath();

<style>*{margin: 0;padding: 0;box-sizing: border-box;}body{display: flex;align-items: center;justify-content: center;}canvas{border: 1px solid black;}
</style>
<body><canvas width="300" height="300"></canvas><script>const canvas = document.querySelector('canvas');// 获取canvas的上下文 相当于笔const ctx = canvas.getContext('2d');// 线段的起点 x,yctx.moveTo(100,100);// 其他点ctx.lineTo(100,200);ctx.lineTo(200,100);// 图形的填充颜色ctx.fillStyle = 'red';// 填充ctx.fill();// 线段的颜色，宽度ctx.strokeStyle = 'blue';ctx.lineWidth = '5';// 将起点和终点连接ctx.closePath();// stroke方法绘制线段ctx.stroke();</script>
</body>

在这里插入图片描述

绘制矩形

第一种方式:strokeRect()，参数为x、y、w、h 缺点：没有办法设置填充颜色
ctx.strokeRect(50, 100, 50, 100)
第二种方式:fillRect() ，填充颜色可以替换绘制图形之前设置填充颜色
ctx.fillStyle = "skyblue"; ctx.fill(); ctx.fillRect(150, 100, 60, 100);

<body><canvas width="300" height="300"></canvas><script>const canvas = document.querySelector('canvas');// 获取canvas的上下文 相当于笔const ctx = canvas.getContext('2d');//绘制矩形// 第一种方式:strokeRect()参数为x、y、w、h 缺点：没有办法设置填充颜色ctx.strokeRect(50, 100, 50, 100)// 第二种方式:fillRect() 填充颜色可以替换 绘制图形之前设置填充颜色ctx.fillStyle = "skyblue";ctx.fill();ctx.fillRect(150, 100, 60, 100);</script>
</body>

在这里插入图片描述

绘制圆形

arc(x, y, radius, starAngle, endAngle, anticlockwise)

x : 圆心的 x 坐标
y：圆心的 y 坐标
radius ：半径
starAngle ：开始角度
endAngle：结束角度
anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针

<body><canvas width="400" height="400"></canvas><script>const canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d');// 开始ctx.beginPath();// x,y,r,起始弧度 ，结束弧度，是否逆时针绘制// 2 * PI * 弧度 = 360// 弧ctx.arc(100, 100, 50, 0.5 * Math.PI, 2 * Math.PI, true);// 结束ctx.stroke();// 圆ctx.beginPath();ctx.strokeStyle = 'red';ctx.lineWidth = '5';ctx.arc(200, 200, 50, 0, 2 * Math.PI, true);// 必须放置arc后面ctx.fillStyle = "blue";ctx.fill();ctx.stroke();</script>
</body>

在这里插入图片描述

清除路径

清除绘画的路径，多个图形就不会连接在一起

context.beginPath()
context.closePath()

清除矩形区域

当在一个画布反复绘制图形，需要将上一次的图形清空

clearRect(x, y, width, height)

绘制文字

fillText(text, x, y, maxWidth)

<body><!-- 宽高必须通过属性设置，如果使用样式设置，会导致画布内的坐标出现问题 --><canvas width="600" height="300"></canvas><script>const canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d');ctx.fillStyle = "skyblue";ctx.fill();ctx.fillRect(150, 100, 60, 100);// 清除画布-整个画布 起点x,y,width,height// ctx.clearRect(0,0,600,300);// 清除部分画布ctx.clearRect(150, 100, 30, 50);// 文字样式ctx.fillStyle = "red";ctx.font = '20px 微软雅黑';// 绘制文字 tex,x,yctx.fillText('绘制文字案例', 50, 100)</script>
</body>

在这里插入图片描述

案例：绘制一个柱状图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例绘制柱状图</title><style>* {margin: 0;padding: 0;}body {display: flex;justify-content: center;}canvas {border: 1px solid black;}</style>
</head><body><canvas width="800" height="520"></canvas><script>const canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d');// 绘制标题文字ctx.font = '20px 微软雅黑';ctx.fillStyle = '#c23531';ctx.fillText('数据可视化-柱状图', 60, 20);// 绘制坐标轴ctx.moveTo(100, 100);ctx.lineTo(100, 400);ctx.lineTo(700, 400);// y轴ctx.moveTo(100, 100);ctx.lineTo(90, 100);ctx.moveTo(100, 160);ctx.lineTo(90, 160);ctx.moveTo(100, 220);ctx.lineTo(90, 220);ctx.moveTo(100, 280);ctx.lineTo(90, 280);ctx.moveTo(100, 340);ctx.lineTo(90, 340);ctx.moveTo(100, 400);ctx.lineTo(90, 400);// x轴ctx.moveTo(100, 400);ctx.lineTo(100, 410);ctx.moveTo(250, 400);ctx.lineTo(250, 410);ctx.moveTo(400, 400);ctx.lineTo(400, 410);ctx.moveTo(550, 400);ctx.lineTo(550, 410);ctx.moveTo(700, 400);ctx.lineTo(700, 410);ctx.stroke()// 横线ctx.strokeStyle = 'rgb(204, 204, 204)';ctx.moveTo(100, 100);ctx.lineTo(700, 100);ctx.moveTo(100, 160);ctx.lineTo(700, 160);ctx.moveTo(100, 220);ctx.lineTo(700, 220);ctx.moveTo(100, 280);ctx.lineTo(700, 280);ctx.moveTo(100, 340);ctx.lineTo(700, 340);ctx.stroke()// y轴文本ctx.font = '16px 微软雅黑';ctx.fillStyle = 'black';ctx.fillText('150', 60, 108);ctx.fillText('120', 60, 168);ctx.fillText('90', 70, 228);ctx.fillText('60', 70, 288);ctx.fillText('30', 70, 348);ctx.fillText('0', 80, 408);// x轴文本ctx.fillText('食品', 160, 420);ctx.fillText('数码', 310, 420);ctx.fillText('服饰', 460, 420);ctx.fillText('箱包', 610, 420);// 绘制矩形 x,y,width,height 注意高度是向下计算，左上角为起点ctx.fillStyle = '#c23531';ctx.fillRect(120, 340, 110, 60);ctx.fillRect(270, 180, 110, 220);ctx.fillRect(420, 220, 110, 180);ctx.fillRect(570, 100, 110, 300);</script>
</body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3lW85DCu-1692416369798)(../3.js笔记复习/JavaScript.assets/下载.png)]

svg

SVG是一种基于 XML 的图像文件格式，全称为Scalable Vector Graphics，可缩放的矢量图形。

<svg> 包裹并定义整个矢量图。<svg>

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}svg {width: 800px;height: 400px;border: 1px solid black;}</style>
</head><body><!-- 默认300 * 150，绘图必须在svg内部绘制 --><svg><!-- 绘制线段 --><line x1="50" y1="50" x2="100" y2="50" stroke="red"></line><!-- 绘制折线 --><polyline points="300 300,50,100,120 400,20 20" stroke="blue" fill-opacity="0"></polyline><!-- 绘制矩形 --><rect x="150" y="150" width="100" height="50" fill="yellow"></rect><!-- 绘制圆形 --><circle cx="170" cy="50" r="50" style="stroke: cyan;fill:none"></circle><!-- 绘制圆形和椭圆 --><ellipse cx="500" cy="200" rx="50" ry="25" style="stroke: gray;fill: black;"></ellipse><!-- 绘制多边形 --><polygon points="600 100,300,400,750 100" stroke="pink" fill-opacity="0.5"></polygon><!-- 绘制任意形状或路径 --><path stroke="orange" fill-opacity="0" d="M 550 100 ,L 570 111,L 600 150,Z"></path></svg>
</body></html>

使用方法

以下标签都要包裹在 <svg> 中使用

`<line>`

创建一条直线。

<!-- x1 y1 是第一个点坐标x2 y2 是第二个点坐标-->
<line x1="" y1="" x2="" y2=""></line>

`<polyline>`

创建折线。

<!-- 依次传入点坐标，即可绘制-->
<polyline points="x1 y1x2 y2x3 y3...
"></polyline>
<!-- 你也可以把上面的代码写成： -->
<polyline points="x1 y1, x2 y2, x3 y3"></polyline>
<!-- 或 -->
<polyline points="x1 y1 x2 y2 x3 y3"></polyline>

`<rect>`

创建矩形。

<!-- x y 左上角点坐标width 宽度height 高度-->
<rect x="" y="" width="" height=""></rect>

`<circle>`

创建圆。

<!--  cx cy 圆心点坐标r 半径style 样式
-->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>

`<ellipse>`

创建圆和椭圆。

<!-- cx cy 圆心点坐标rx x轴半径ry y轴半径-->
<ellipse cx="" cy="" rx="" ry="" style="fill:black;"></ellipse>

`<polygon>`

创建多边形。

<polygon points="x1 y1, x2 y2, x3 y3" />

`<path>`

通过指定点以及点和点之间的线来创建任意形状。

<!--M 移动到初始位置L 画线Z 将结束和开始点闭合
-->
<path d="M x1 y1L x2 y2L x3 y3L x4 y4L x5 y5L x6 y6L x7 y7Z
"></path>

起始文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Hand Coded SVG</title><style>html,body {height: 100%;width: 100%;background: #e9e9e9;}body {margin: 0;text-align: center;}.grid {width: 750px;height: 500px;margin: 0 auto;padding-top: 100px;padding-left: 100px;background-image: url('grid.png');position: relative;}.grid::before {content: "";border-left: 1px solid #7c7cea;position: absolute;top: 0;left: 100px;width: 750px;height: 600px;}.grid::after {content: "";border-top: 1px solid #7c7cea;position: absolute;top: 100px;left: 0;width: 850px;height: 500px;}svg {stroke: #000;stroke-width: 5;stroke-linecap: round;stroke-linejoin: round;fill: none;}</style>
</head><body><div class="grid"></div></body></html>

SVG入门—如何手写SVG(opens new window)
SVG 入门指南

Echarts

01-基本使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 从bootcdn获取echarts的在线链接 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js"></script><style>* {margin: 0;padding: 0;}.ec {margin: 0 auto;width: 800px;height: 400px;}</style>
</head><body><!-- 图表容器 --><div class="ec"></div><script>// 初始化echarts容器const myEcharts = echarts.init(document.querySelector('.ec'));// 设定配置项、数据const option = {// 图表标题title: {// 主标题text: '主标题',// 主标题颜色textStyle: {color: 'red',},// 主标题位置left: 'center',// 子标题subtext: '子标题',},// x轴配置项xAxis: {// x轴数据data: ['小米', '华为', 'oppo', 'vivo'],},// y轴配置项yAxis: {// 显示y轴的线axisLine: {show: true,},// 显示y轴刻度axisTick: {show: true,}},// 系列设置：图标类型 数据展示series: [{// 图标类型 bar line pietype: 'bar',// 数据data: [10, 20, 30, 40],// 颜色color: 'orange',}]}// 设定配置项myEcharts.setOption(option);</script>
</body></html>

02-多个图表展示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 从bootcdn获取echarts的在线链接 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js"></script><style>* {margin: 0;padding: 0;}.ec,.ec2,.ec3 {margin: 0 auto;width: 800px;height: 600px;}</style>
</head><body><!-- 图表容器 --><div class="ec"></div><div class="ec2"></div><div class="ec3"></div><script>// 图表一// 初始化echarts容器const myEcharts = echarts.init(document.querySelector('.ec'));// 设定配置项、数据const option = {// 图表标题title: {// 主标题text: '主标题',// 主标题颜色textStyle: {color: 'red',},// 主标题位置left: 'center',// 子标题subtext: '子标题',},// x轴配置项xAxis: {// x轴数据data: ['小米', '华为', 'oppo', 'vivo'],},// y轴配置项yAxis: {// 显示y轴的线axisLine: {show: true,},// 显示y轴刻度axisTick: {show: true,}},// 系列设置：图标类型 数据展示series: [{// 图标类型 bar line pietype: 'bar',// 数据data: [10, 20, 30, 40],// 颜色color: 'orange',}]}// 设定配置项myEcharts.setOption(option);// 图表二// 初始化echarts容器const myEcharts2 = echarts.init(document.querySelector('.ec2'));// 设定配置项、数据const option2 = {// 图表标题title: {// 主标题text: '主标题',// 主标题颜色textStyle: {color: 'red',},// 主标题位置left: 'center',// 子标题subtext: '子标题',// 子标题颜色subtextStyle: {color: 'blue'}},// x轴配置项xAxis: {// x轴数据data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],},// y轴配置项yAxis: {// // 显示y轴的线// axisLine: {//     show: true,// },// // 显示y轴刻度// axisTick: {//     show: true,// }},// 系列设置：图标类型 数据展示series: [{// 图标类型 bar line pietype: 'line',// 数据data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120],// 颜色color: 'orange',}]}// 设定配置项myEcharts2.setOption(option2);// 图表三// 初始化echarts容器const myEcharts3 = echarts.init(document.querySelector('.ec3'));// 设定配置项、数据const option3 = {// 图表标题title: {// 主标题text: '主标题',// 主标题颜色textStyle: {color: 'red',},// 主标题位置left: 'center',// 子标题subtext: '子标题',// 子标题颜色subtextStyle: {color: 'blue'}},// // x轴配置项// xAxis: {},// // y轴配置项// yAxis: {},// 系列设置：图标类型 数据展示series: [{// 图标类型 bar line pietype: 'pie',// 数据data: [{name: '蔬菜',value: 10},{name: '水果',value: 20},{name: '肉类',value: 30},],// 饼图 宽高width: 600,height: 600,// 饼图 位置left: 100,// top: 5,// 饼图 半径// radius: 400,}]}// 设定配置项myEcharts3.setOption(option3);</script>
</body></html>

03-一个图标展示多个图标类型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 从bootcdn获取echarts的在线链接 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js"></script><style>* {margin: 0;padding: 0;}.ec{margin: 0 auto;width: 800px;height: 600px;}</style>
</head><body><!-- 图表容器 --><div class="ec"></div><script>// 图表一// 初始化echarts容器const myEcharts = echarts.init(document.querySelector('.ec'));// 设定配置项、数据const option = {// 图表标题title: {// 主标题text: '主标题',// 主标题颜色textStyle: {color: 'red',},// 主标题位置left: 'center',// 子标题subtext: '子标题',},// x轴配置项xAxis: {// x轴数据data: ['小米', '华为', 'oppo', 'vivo'],},// y轴配置项yAxis: {// 显示y轴的线axisLine: {show: true,},// 显示y轴刻度axisTick: {show: true,}},// 系列设置：图标类型 数据展示series: [{// 图标类型 bar line pietype: 'bar',// 数据data: [10, 20, 30, 40],// 颜色color: 'orange',},{// 图标类型 bar line pietype: 'line',// 数据data: [10, 20, 30, 40],// 颜色color: 'blue',},{// 图标类型 bar line pietype: 'pie',// 数据data: [{name: '蔬菜',value: 10},{name: '水果',value: 20},{name: '肉类',value: 30},{name: '家具',value: 40},],// 饼图 宽高width: 300,height: 300,// 饼图 位置left: 100,top: 50,// 饼图 半径radius: 50,}]}// 设定配置项myEcharts.setOption(option);</script>
</body></html>

04-dataset数据集使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 从bootcdn获取echarts的在线链接 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js"></script><style>* {margin: 0;padding: 0;}.ec {margin: 0 auto;width: 800px;height: 600px;}</style>
</head><body><!-- 图表容器 --><div class="ec"></div><script>// 图表一// 初始化echarts容器const myEcharts = echarts.init(document.querySelector('.ec'));// 设定配置项、数据const option = {// 设置数据集dataset: {// 数据源source: [["小米", 10, 40, '蔬菜', 10],["华为", 20, 30, '水果', 60],["oppo", 30, 20, '肉类', 50],["vivo", 40, 10, '家具', 70],]},// 图表标题title: {// 主标题text: '主标题',// 主标题颜色textStyle: {color: 'red',},// 主标题位置left: 'center',// 子标题subtext: '子标题',},// x轴配置项// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。xAxis: { type: 'category' },// y轴配置项yAxis: {// 显示y轴的线axisLine: {show: true,},// 显示y轴刻度axisTick: {show: true,}},// 系列设置：图标类型 数据展示series: [{// 图标类型 bar line pietype: 'bar',encode: {y: 1}},{// 图标类型 bar line pietype: 'line',encode: {y: 2}},{// 图标类型 bar line pietype: 'pie',// 数据encode: {//饼图旁边的文字itemName: 3,value: 4},// 饼图 宽高width: 300,height: 300,// 饼图 位置left: 50,top: 100,// 饼图 半径radius: 50,}]}// 设定配置项myEcharts.setOption(option);</script>
</body></html>

05-echarts组件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 从bootcdn获取echarts的在线链接 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js"></script><style>* {margin: 0;padding: 0;}.ec {margin: 0 auto;width: 800px;height: 600px;}</style>
</head><body><!-- 图表容器 --><div class="ec"></div><script>// 图表一// 初始化echarts容器const myEcharts = echarts.init(document.querySelector('.ec'));// 设定配置项、数据const option = {// 设置数据集dataset: {// 数据源source: [["小米", 10, 40, '蔬菜', 10],["华为", 20, 30, '水果', 60],["oppo", 30, 20, '肉类', 50],["vivo", 40, 10, '家具', 70],]},// 图表标题title: {// 主标题text: '主标题',// 主标题颜色textStyle: {color: 'red',},// 主标题位置left: 150,top: 5,// 子标题subtext: '子标题',},// x轴配置项// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。xAxis: { type: 'category' },// y轴配置项yAxis: {// 显示y轴的线axisLine: {show: true,},// 显示y轴刻度axisTick: {show: true,}},// 系列设置：图标类型 数据展示series: [{// 图标类型 bar line pietype: 'bar',encode: {y: 1},name: '第一季度'},{// 图标类型 bar line pietype: 'line',encode: {y: 2},name: '第二季度'},{// 图标类型 bar line pietype: 'pie',// 数据encode: {//饼图旁边的文字itemName: 3,value: 4},// 饼图 宽高width: 300,height: 300,// 饼图 位置left: 50,top: 100,// 饼图 半径radius: 50,}],//提示组件tooltip: {//提示框文字的颜色textStyle: {color: 'orange'}},// x轴下的范围选择拖动框dataZoom: {},//系列切换组件legend: {data: ['第一季度', '第二季度']},//工具栏组件toolbox: {show: true,feature: {saveAsImage: {},dataZoom: {yAxisIndex: "none"},dataView: {readOnly: false},magicType: {type: ["line", "bar"]},restore: {},}},//调整图表布局grid: {left: 300,right: 0,}}// 设定配置项myEcharts.setOption(option);</script>
</body></html>

06-一个坐标系

在这里插入图片描述

<!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><!-- 从bootcdn获取echarts的在线链接 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js"></script><style>* {margin: 0;padding: 0;}div {width: 100%;height: 400px;}</style>
</head><body><div></div>
</body></html>
<script>let dom = document.querySelector('div');let mycharts = echarts.init(dom);//一个坐标系:散点图mycharts.setOption({//标题title: {text: "一个坐标系-散点图",left: 'center'},//x轴xAxis: {// type: 'category'},yAxis: {},//散点图series: [{type: "scatter",//散点图的数据data: [[10, 20],[10, 22],[10, 21],[13, 66],[50, 9],[44, 22],[15, 10]]}],});
</script>

07-多个坐标轴

在这里插入图片描述

<!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.1.2/echarts.js"></script><style>* {margin: 0;padding: 0;}div {width: 800px;height: 400px;}</style>
</head><body><!-- 准备一个容器：容器就是显示图标区域 --><div></div>
</body></html>
<script>//基于准备好的DOM初始化echarts实例let dom = document.querySelector('div');//创建echarts实例let mycharts = echarts.init(dom);//双做标题mycharts.setOption({title: {text: "双坐标",left: 'center',},xAxis: {data: ['游戏', '直播', '经济', '娱乐']},yAxis: [{  //显示Y轴的线axisLine: {show: true},//显示Y轴刻度axisTick: {show: true}},{//显示Y轴的线axisLine: {show: true},//显示Y轴刻度axisTick: {show: true}}],series: [{type: 'line',data: [10, 20, 30, 40],//用的是索引值为0的y轴yAxisIndex: 0},{type: 'bar',data: [6, 10, 80, 20],//用的是索引值为1的y轴yAxisIndex: 1}]})
</script>

08-柱状图标签

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ECharts Example</title><!-- 引入 ECharts 库 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head><body><!-- 创建一个用于放置图表的容器 --><div id="myChart" style="width: 600px; height: 400px;"></div><script>// 在 JavaScript 中配置和绘制图表// 创建 ECharts 实例，并将图表容器传递给它var myChart = echarts.init(document.getElementById('myChart'));// 定义图表的配置项和数据var option = {title: {text: '柱状图示例'},xAxis: {data: ['A', 'B', 'C', 'D', 'E']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10],label: {  // 添加 label 配置show: true,  // 显示标签position: 'top'  // 标签位置}}],tooltip: {  // 配置悬浮提示框trigger: 'axis',  // 触发方式为坐标轴axisPointer: {  // 坐标轴指示器配置type: 'shadow'  // 显示阴影}}};// 使用配置项绘制图表myChart.setOption(option);</script>
</body></html>

关于更多，请去官网查看链接: echarts官网

数据可视化-canvas-svg-Echarts

数据可视化技术栈 canvas <canvas width"300" height"300"></canvas>当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。切记不能通过样式去设置画布的宽度与高度宽高必须通过属性设置，…...

编程日记 2023/8/24 2:08:24

深信服 SG上网优化管理系统 catjs.php 任意文件读取漏洞[2023-HW]

深信服 SG上网优化管理系统 catjs.php 任意文件读取漏洞一、漏洞描述二、漏洞影响三、网络测绘四、漏洞复现小龙POC检测: 五、修复建议免责声明：请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间…...

编程日记 2023/8/24 2:07:21

使用 jackson的objectMapper 来实现 import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.core.type.TypeReference; import com.fasterxml.jackson.databind.DeserializationFeature; import com.fasterxml.jackson.databind.ObjectMa…...

编程日记 2023/8/24 2:06:19

Docker Compose一键管理容器

可以一键批量管理docker的容器。将所有需要创建的容器定义在compose配置文件中，通过一个命令一键可以创建并运行这些容器，而不需要一个一个启动。可以批量启动停止服务。安装 #安装Docker-Compose并安装到/usr/local/bin/docker-compose curl -L &quo…...

编程日记 2023/8/24 2:05:18

API接口文档利器：Swagger 和接口调试利器：Postman

2.接口相关工具 2.1API接口文档利器：Swagger 2.1.1Swagger介绍 Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务 (https://swagger.io/)。它的主要作用是： 使得前后端分离开发更加方便&#xff0…...

编程日记 2023/8/24 2:04:16

Redis手动实现分布式锁-Demo

1、pom文件依赖  <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> 2、具体实现 package com.xch;import org.spring…...

编程日记 2023/8/24 2:03:15

BBS项目day04 文章详情页、点赞点菜、评论功能(根评论和子评论)、评论分页之刷新评论页面

一、路由 from django.contrib import admin from django.urls import path, re_path from app01 import views from django.views.static import serve from django.conf import settingsurlpatterns [path(admin/, admin.site.urls),# 注册path(register/, views.register)…...

编程日记 2023/8/24 2:02:14

【带着学Pytorch】1、pytorch的安装与入门

一、介绍与安装 1.1. pytorch优点：上手简单：掌握语法和深度学习的概念，尤其是Numpy的使用与python的list切片有共同性。代码灵活：基本调用封装好的模块，动态图使编写更加灵活资源多：硬件，软件，文档资料都很多。容易调试：动态运行在调试中可以观察数据的变化是否符…...

编程日记 2023/8/24 2:01:13

smartbi token回调获取登录凭证漏洞

2023年7月28日Smartbi官方修复了一处权限绕过漏洞。未经授权的攻击者可利用该漏洞，获取管理员token，完全接管管理员权限。于是研究了下相关补丁并进行分析。 0x01分析结果依据补丁分析，得到如下漏洞复现步骤第一步，设置Engi…...

编程日记 2023/8/24 2:00:12

SQL注入之堆叠查询

文章目录堆叠查询是什么？堆叠查询修改所有用户密码堆叠查询删除数据库恢复数据库堆叠查询是什么？ 在SQL中，分号;是用来表示一条sql语句的结束。试想一下我们在; 结束一个sql语句后继续构造下一条语句，会不会一起执行&#xff1f…...

编程日记 2023/8/24 1:59:11

java-JVM 类加载机制

JVM 类加载机制 JVM 类加载机制分为五个部分：加载，验证，准备，解析，初始化，下面我们就分别来看一下这五个过程。 1.1. 加载加载是类加载过程中的一个阶段，这个阶段会在内存中生成一个代表这…...

编程日记 2023/8/24 1:58:09

前端面试：【网络协议与性能优化】提升Web应用性能的策略

嗨，亲爱的Web开发者！构建高性能的Web应用是每个开发者的梦想。本文将介绍一些性能优化策略，包括资源加载、懒加载和CDN等，以帮助你提升Web应用的性能。 1. 性能优化策略： 压缩资源： 使用Gzip或Brotli等压缩…...

编程日记 2023/8/24 1:57:07

前端面试：【React】构建现代Web的利器

嘿，亲爱的React探险家！在前端开发的旅程中，有一个神奇的库，那就是React。React是一个用于构建现代Web应用的强大工具，它提供了组件化开发、状态管理、生命周期管理和虚拟DOM等特性，让你的应用开发变得更加高…...

编程日记 2023/8/24 1:56:05

使用mysql:5.6和 owncloud 镜像，构建一个个人网盘。

1、使用mysql:5.6和 owncloud 镜像，构建一个个人网盘。拉取mysql:5.6和owncloud的镜像和生成实例 [rootlocalhost ~]# docker pull mysql:5.6 [rootlocalhost ~]# docker pull ownclound [rootlocalhost ~]# docker run -d --name mydb1 --env MYSQL_ROOT_PASSWO…...

编程日记 2023/8/24 1:55:04

k8s发布应用

前言首先以SpringBoot应用为例介绍一下k8s的发布步骤。 1.从代码仓库下载代码，比如GitLab； 2.接着是进行打包，比如使用Maven； 3.编写Dockerfile文件，把步骤2产生的包制作成镜像； 4.上传步骤3的镜像到…...

编程日记 2023/8/24 1:54:03

微信小程序教学系列（4）

微信小程序教学系列第四章：小程序优化与调试 1. 性能优化技巧在开发微信小程序时，我们可以采取一些性能优化技巧，以提升小程序的性能表现和用户体验。以下是一些常用的性能优化技巧： 减少网络请求：尽量合并网络请…...

编程日记 2023/8/24 1:53:02

Netty核心源码解析(三)--NioEventLoop

NioEventLoop介绍 NioEventLoop继承SingleThreadEventLoop,核心是一个单例线程池,可以理解为单线程,这也是Netty解决线程并发问题的最根本思路--同一个channel连接上的IO事件只由一个线程来处理,NioEventLoop中的单例线程池轮询事件队列,有新的IO事件或者用户提交的task时便执…...

编程日记 2023/8/24 1:51:59

Vue2学习笔记のVue核心

目录 Vue核心初识VueVue模板语法数据绑定el与data的两种写法MVVM模型数据代理Object.defineProperty方法何为数据代理Vue中的数据代理事件处理事件的基本使用事件修饰符键盘事件计算属性姓名案例_插值语法实现姓名案例_methods实现姓名案例_计算属性实现姓名案例_计算属性简写…...

编程日记 2023/8/24 1:50:56

把matlab的m文件打包成单独的可执行文件

安装Matlab Compiler Adds-on在app里找到Application Compiler 选择要打包的文件matlab单独的运行程序的话需要把依赖的库做成runtime. 这里有两个选项. 上面那个是需要对方在联网的情况下安装, 安装包较小.下面那个是直接把runtime打包成安装程序, 大概由你的程序依赖的库的多…...

编程日记 2023/8/24 1:49:55

redis 6个节点（3主3从），始终一个节点不能启动

redis节点，始终有一个节点不能启动起来 1.修改了配置文件 protected-mode no，重启修改了配置文件 protected-mode no，重启redis问题依然存在 2、查看/var/log/message的redis日志 Aug 21 07:40:33 redisMaster kernel: Out of memory: K…...

编程日记 2023/8/24 1:48:54

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。核心优势对比基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/9/9 10:12:45

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/9/9 10:11:47

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/9/13 17:43:37

五年级数学知识边界总结思考-下册

目录一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...

编程新知 2025/6/20 13:47:44

工程地质软件市场：发展现状、趋势与策略建议

一、引言在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/9/9 8:26:07

【论文笔记】若干矿井粉尘检测算法概述

总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/9 21:22:02

蓝桥杯冶炼金属

原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/6/21 11:16:25

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。主要功能：服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/9/2 19:56:38

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...

编程新知 2025/9/6 1:25:52

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...

编程新知 2025/9/3 21:36:33

数据可视化

技术栈

canvas

获取上下文

绘制线段

绘制矩形

绘制圆形

清除路径

清除矩形区域

绘制文字

案例：绘制一个柱状图

svg

案例

使用方法

<line>

<polyline>

<rect>

<circle>

<ellipse>

<polygon>

<path>

起始文件

Echarts

01-基本使用

02-多个图表展示

03-一个图标展示多个图标类型

04-dataset数据集使用

05-echarts组件

06-一个坐标系

07-多个坐标轴

08-柱状图标签

相关文章：

`<line>`

`<polyline>`

`<rect>`

`<circle>`

`<ellipse>`

`<polygon>`

`<path>`