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

网站备案备注信息/爬虫搜索引擎

news 文章来源：https://blog.csdn.net/weixin_46328739/article/details/134851418 2025/2/23 20:19:10

网站备案备注信息,爬虫搜索引擎,做企业网站需要什么资料,全国信用企业信息公示系统查询1.数据可视化前言 1.1.什么是数据可视化数据可视化： 就是把数据以更加直观的方式进行呈现. 1.2.数据可视化的好处清晰有效地传达与沟通信息更容易洞察隐藏在数据中的信息 2.ECharts的基本使用 2.1.ECharts官网 ECharts是百度公司开源的一个使用 JavaScript 实…

1.数据可视化前言

1.1.什么是数据可视化

数据可视化：就是把数据以更加直观的方式进行呈现.

1.2.数据可视化的好处

清晰有效地传达与沟通信息
更容易洞察隐藏在数据中的信息

2.ECharts的基本使用

2.1.ECharts官网

ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形
库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表

官网地址
- https://echarts.apache.org/zh/index.html

2.2.ECharts的快速上手

步骤1：引入 echarts.js 文件

<script src="js/echarts.min.js"></script>

步骤2：准备一个呈现图表的盒子
步骤3：初始化 echarts 实例对象
步骤4：准备配置项
步骤5：将配置项设置给 echarts 实例对象

通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要,
一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,
其他的代码都是固定不变的.

2.3.相关配置讲解

xAxis

直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
呈现

yAxis

直角坐标系中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
series 下找数据进行图表的绘制

series

系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

3.ECharts常用图表

3.1.图表1 柱状图

3.1.1.柱状图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var option = {}
mCharts.setOption(option)
</script>
</body>
</html>

步骤2 准备x轴的数据

let xDataArr = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

步骤3 准备 y 轴的数据

var yDataArr =  [120, 200, 150, 80, 70, 110, 130]

步骤4 准备 option , 将 series 中的 type 的值设置为: bar

var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr
}
]
}

注意: 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制

最终的效果如下图:

柱状图

3.1.2.通用配置

可以查看官网配置项手册

https://echarts.apache.org/zh/option.html#title

3.1.3.柱状图的常见效果

标记:
- 最大值\最小值 markPoint

series: [
{
......
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
}
}
]

柱状图标记

平均值 markLine

series: [{......markLine: {data: [{type: 'average', name: '平均值'}]}}
]

柱状图平均值

显示

数值显示 label

   series: [{......label: {show: true, // 是否可见rotate: 60 // 旋转角度}}]

在这里插入图片描述

柱宽度 barWidth

series: [{......barWidth: '30%' // 柱的宽度}]

在这里插入图片描述

横向柱状图

所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为
value , yAxis 的 type 设置为 category , 并且设置 data 即可

var option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xDataArr
},
series: [
{
type: 'bar',
data: yDataArr
}
]
}

在这里插入图片描述

1.数据可视化前言

1.1.什么是数据可视化

1.2.数据可视化的好处

2.ECharts的基本使用

2.1.ECharts官网

2.2.ECharts的快速上手

2.3.相关配置讲解

3.ECharts常用图表

3.1.图表1 柱状图

3.1.1.柱状图的实现步骤

3.1.2.通用配置

3.1.3.柱状图的常见效果

相关文章：