数据可视化-canvas-svg-Echarts

数据可视化

技术栈

canvas

<canvas width="300" height="300"></canvas>
  1. 当没有设置宽度和高度的时候,canvas 会初始化宽度为 300 像素和高度为 150 像素。切记不能通过样式去设置画布的宽度与高度
  2. 宽高必须通过属性设置,如果使用样式设置,会导致画布内的坐标出现问题
  3. 给canvas画布添加文本内容、子节点没有任何意义
  4. 浏览器认为canvas标签是一张图片,右键可保存图片
  5. 你想操作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官网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/44364.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

对话 4EVERLAND:Web3 是云计算的新基建吗?

在传统云计算的发展过程中&#xff0c;数据存储与计算的中心化问题&#xff0c;对用户来说一直存在着潜在的安全与隐私风险——例如单点故障可能会导致网络瘫痪和数据泄露等危险。同时&#xff0c;随着越来越多 Web3 项目应用的落地&#xff0c;对于数据云计算的性能要求也越来…

对前端PWA应用的部分理解和基础Demo

一、什么是PWA应用&#xff1f; 1、PWA简介 ​ 渐进式Web应用&#xff08;Progressive Web App&#xff09;&#xff0c;简称PWA&#xff0c;是 Google 在 2015 年提出的一种使用web平台技术构建的应用程序&#xff0c;官方认为其核心在于Reliable&#xff08;可靠的&#xf…

git压缩/合并多次commit提交为1次commit提交

git压缩/合并N次commit提交为1次commit提交 假设有最近3次提交&#xff1a; commit_id1 commit_id2 commit_id3目标是把以上3次commit合并成1个commit&#xff0c;注意&#xff0c;最新的commit提交在最上面。 在git bash里面的操作步骤&#xff1a; &#xff08;1&#xff0…

基于深度学习的铁路异物侵限检测算法研究_整体认知感觉欠点意思,但是有一个新的变形卷积-Octave 卷积

相比于其他的交通运输方式&#xff0c;铁路运输具有准时性高、连续性强、速度快、运输量大、运输成本低以及安全可靠等优点。同时由于国家高速铁路网络建设的不断推进&#xff0c;铁路运输逐渐成为我国客运与货运的主要运输方式。虽然铁路运输为人们出行和货物运输带来的极大的…

MySQL数据库——SQL(3)-DQL(基本查询、条件查询、聚合函数、分组查询、排序查询、分页查询、案例练习)

目录 语法 基本查询 1.查询多个字段 2.设置别名 3.去除重复记录 示例 条件查询 1.语法 2.条件 示例 聚合函数 介绍 常见聚合函数 语法 示例 分组查询 语法 示例 排序查询 1.语法 2.排序方式 示例 分页查询 语法 示例 DQL案例练习 执行顺序 DQL总结…

简单理解Linux中的一切皆文件

一款操作系统要管理各种各样不同的硬件&#xff0c;因为硬件的不同所以它们使用的文件系统也不同。但是按道理来说&#xff0c;文件系统的不同对于用户来说可不是一件好事&#xff0c;操作不同的硬件就要使用不同的方法。 但是Linux有一切皆文件。 简单来说&#xff0c;Linux…

基于单片机DHT11温湿度NRF2401无线通信控制系统

一、系统方案 本设计采用STC89C5单片机作为主控制器&#xff0c;从机采用DHT11传感器采集温湿度、按键设置报警阀值&#xff0c;液晶1602显示&#xff0c;蜂鸣器报警&#xff0c;无线NRF2401模块。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统…

使用 umap 图形化展示原文在嵌入后的位置情况

使用 umap_plot 图形化展示原文在嵌入后的位置情况 1. 效果展示2. 工具函数3. 示例代码14. 示例代码2 1. 效果展示 2. 工具函数 import umap import altair as altfrom numba.core.errors import NumbaDeprecationWarning, NumbaPendingDeprecationWarning import warningswar…

G0第26章:微服务概述与gRPCprotocol buffers

Go微服务与云原生 1、微服务架构介绍 单体架构&#xff08;电商&#xff09; SOA架构&#xff08;电商&#xff09; 微服务架构&#xff08;电商&#xff09; 优势 挑战 拆分 发展史 第一代:基于RPC的传统服务架构 第二代:Service Mesh(istio) 微服务架构分层 核心组件 Summar…

【GaussDB】 SQL 篇

建表语句 表的分类 普通的建表语句 复制表内容 只复制表结构 create table 新表名(like 源表名 including all); 如果希望注释被复制的话要指定including comments 复制索引、主键约束和唯一约束&#xff0c;那么需要指定including indexes including constraints &#xf…

MsrayPlus多功能搜索引擎采集软件

MsrayPlus多功能搜索引擎采集软件 摘要&#xff1a; 本文介绍了一款多功能搜索引擎软件-MsrayPlus&#xff0c;该软件能够根据关键词从搜索引擎中检索相关数据&#xff0c;并提供搜索引擎任务、爬虫引擎任务和联系信息采集三大功能。我们将分析该软件在不同领域的应用&#xf…

VBA技术资料MF43:VBA_Excel中自动填充

【分享成果&#xff0c;随喜正能量】以时寝息&#xff0c;当愿众生&#xff0c;身得安隐&#xff0c;心无动乱。愿我们都能&#xff0c;梦见幸福&#xff01;在踉跄中前进&#xff0c;在跌倒后跃进&#xff0c;逐渐强大.。 我给VBA的定义&#xff1a;VBA是个人小型自动化处理的…

使用Jmeter自带recorder代理服务器录制接口脚本

脚本录制 配置线程组 添加代理服务器 端口 和 录制脚本放置位置可根据需要设置 启动录制 点击启动后 弹出创建证书提示&#xff0c;点击OK 这个证书后续需要使用到 然后可见 一个弹窗。 Recorder . 本质是代理服务录制交易控制 可设置对应数据 方便录制脚本的查看 证书配置…

jenkins一键部署github项目

个人目前理解jenkins部署分为两步&#xff1a; 构建项目&#xff0c;如生成jar自动执行sh脚本 如果没有jenkins&#xff0c;我们可能需要将jar移动到服务器&#xff0c;然后执行java -jar跑程序&#xff0c;jenkins可以替代我们执行这些东西&#xff0c;下面从0开始&#xff0…

前端 -- 基础 网页、HTML、 WEB标准 扫盲详解

什么是网页 : 网页是构成网站的基本元素&#xff0c;它通常由 图片、链接、文字、声音、视频等元素组成。 通常我们看到的网页 &#xff0c;常见以 .html 或 .htm 后缀结尾的文件&#xff0c; 因此俗称 HTML 文件 什么是 HTML : HTML 指的是 超文本标记语言&#xff0c…

Python入门--变量和数据类型

什么是变量&#xff1f; 在编程中&#xff0c;变量是指内存中的一段存储空间&#xff0c;用于存储数据。使用变量可以方便地存储数据并在程序中进行操作。 如何定义变量&#xff1f; 在Python中&#xff0c;可以使用“”符号来定义变量&#xff0c;例如&#xff1a; a 1 b …

基于IMX6ULLmini的linux裸机开发系列七:中断处理流程

中断上下文 cpu通过内核寄存器来运行指令并进行数据的读写处理的&#xff0c;它在进入中断前一个时刻的具体值&#xff0c;称为中断上下文 中断上下文是指CPU在进入中断之前保存的寄存器状态和其他相关信息。当CPU接收到中断请求时&#xff0c;它会保存当前正在执行的指令的状…

[python爬虫] 爬取图片无法打开或已损坏的简单探讨

本文主要针对python使用urlretrieve或urlopen下载百度、搜狗、googto&#xff08;谷歌镜像&#xff09;等图片时&#xff0c;出现"无法打开图片或已损坏"的问题&#xff0c;作者对它进行简单的探讨。同时&#xff0c;作者将进一步帮你巩固selenium自动化操作和urllib…

sklearn机器学习库(二)sklearn中的随机森林

sklearn机器学习库(二)sklearn中的随机森林 集成算法会考虑多个评估器的建模结果&#xff0c;汇总之后得到一个综合的结果&#xff0c;以此来获取比单个模型更好的回归或分类表现。 多个模型集成成为的模型叫做集成评估器&#xff08;ensemble estimator&#xff09;&#xf…

CloudCompare——统计滤波

目录 1.统计滤波2.软件实现3.完整操作4.算法源码5.相关代码 本文由CSDN点云侠原创&#xff0c;CloudCompare——统计滤波&#xff0c;爬虫自重。如果你不是在点云侠的博客中看到该文章&#xff0c;那么此处便是不要脸的爬虫。 1.统计滤波 算法原理见&#xff1a;PCL 统计滤波器…