# Axios与ECharts进行数据可视化案例
*数据分析案例*
文章《 Axios 与 ECharts 进行 数据可视化 案例》主要介绍如何使用 Axios 和 ECharts 两个开源工具进行 数据可视化。演示了如何使用 Axios 处理数据，并使用 ECharts 创建图表来进行数据可视化。
## 目录
[TOC]
## echarts使用
### 绘制柱状图
#### 准备一个HTML存储图表
首先我们要了解一些有关前端的知识，在前端中，HTML的标签能够存储住一些东西，这些东西可能是一些形状，也可能是一些图像或视频，而有趣的问题就在这里，echarts创建的图表是生成在哪里的呢？
是的，它的图表生成在HTML的控件中，因此，在使用echarts之前，我们需要创建出一个控件，就像下面这样
```html
<div id='echarts_div_em' style="width: 1024px; height: 512px">
<!-- 这里就是存储echarts 图表的元素 不知道你有没有注意到我给它设置了一个id，一会你就知道它怎么用啦 -->
</div>
```
#### 准备 JS 脚本 开始进行可视化操作
##### 引入echarts
在这里，我们要回顾一些知识，js文件是可以在外界引入到HTML文件中，进而被使用的，echarts这个框架其本质就是一个JS脚本文件，我们只需要将这个JS进行引入，下面就是在html中引入echarts的操作。
```html
<!-- 在这里就是将 echarts 的脚本引入进来了 需要注意的是这里涉及到服务器的网络传输，可能会导致echarts可视化失败，建议下载到本地，放到自己的项目中! -->
<script src="http://www.lingyuzhao.top/js/lib/echarts/echarts.min.js"></script>
<div id='echarts_div_em' style="width: 1024px; height: 512px">
</div>
```
##### 使用echarts进行可视化
echarts的前期准备工作已经差不多，接下来就是更加具体的可视化操作了，echarts的可视化大概有这样的几个步骤。
1 创建图表实例：首先，你需要在HTML文档中创建一个用于容纳ECharts图表的容器元素，例如一个div元素。然后，你可以使用ECharts提供的echarts.init()方法来初始化图表实例，并将其与容器元素关联起来。例如：
```JavaScript
// 获取容器元素 TODO 注意这里哦！这个元素是用来存储图表的，还记着前面说到的 id 吗，就是它！用id告诉echarts将图表存储在哪里！
const chartDom = document.getElementById('echarts_div_em');
// 初始化图表实例 这个示例其实就是图表对象 但是现在没有图，因为还没有设置数据呢，至于图怎么出来呢，继续往下看！
const myChart = echarts.init(chartDom);
```
2 设置图表配置项：通过调用setOption()方法，可以为图表实例设置各种配置项，包括标题、图例、坐标轴、数据等。这些配置项可以在ECharts提供的选项对象中进行定义，而这些就是json格式！例如：
```JavaScript
// 创建配置项对象
const option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 设置图表配置项
myChart.setOption(option);
```
上面的脚本中就是设置了一个柱状图，x横轴为["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]，数据为[5, 20, 36, 10, 10, 20]，经过这里，图应该就已经出现啦，下面是完整代码。
#### 完整的HTML文件
直接复制，保存为HTML文件，然后打开就可以了哦！！
```html
<!DOCTYPE HTML>
<html lang="ch-zn">
<head>
<title>Title</title>
<meta charset="GBK">
</head>
<body>
<!-- 在这里就是将 echarts 的脚本引入进来了 -->
<script rel="script" type="text/javascript" src="http://www.lingyuzhao.top/js/lib/echarts/echarts.min.js"></script>
<div id='echarts_div_em' style="width: 1024px; height: 512px">
<!-- 这里就是存储echarts 图表的元素 不知道你有没有注意到我给它设置了一个id，一会你就知道它怎么用啦 -->
</div>
</body>
</html>
<script>
window.onload = () => {
// 获取容器元素 TODO 注意这里哦！这个元素是用来存储图表的，还记着前面说到的 id 吗，就是它！用id告诉echarts将图表存储在哪里！
const chartDom = document.getElementById('echarts_div_em');
// 初始化图表实例 这个示例其实就是图表对象 但是现在没有图，因为还没有设置数据呢，至于图怎么出来呢，继续往下看！
const myChart = echarts.init(chartDom);
// 创建配置项对象
const option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 设置图表配置项
myChart.setOption(option);
}
</script>
```
### json数据装载到echarts
#### 前期准备
实际的开发中，我们往往要使用一些框架来向后端服务器索要数据，然后才可以进行数据的可视化操作，在这里我们将会使用本网站中热度数据的获取接口：[[点击前往]专题热度数据接口][1]
下面就是获取到的后端数据，其中的 "TOPIC_CALORIFIC_FRACTION" 代表了热度数据，这是一个json数据格式，可以访问[《前端 json 对象数据处理方法汇总》][2]文章了解到 json 数据相关的知识！
```json
{
"topics": [
{
"id": 79268899,
"userId": 1,
"topicName": "网站公告",
"TOPIC_CALORIFIC_FRACTION": 7000076
},
{
"id": 17055036,
"userId": 1,
"topicName": "正则表达式",
"TOPIC_CALORIFIC_FRACTION": 65
},
{
"id": 88842223,
"userId": 1,
"topicName": "数据分析案例",
"TOPIC_CALORIFIC_FRACTION": 54
},
{
"id": 20619125,
"userId": 1,
"topicName": "曲谱分享",
"TOPIC_CALORIFIC_FRACTION": 49
},
{
"id": -44879746,
"userId": 1,
"topicName": "原神",
"TOPIC_CALORIFIC_FRACTION": 29
},
{
"id": -1426659,
"userId": 4,
"topicName": "文章所属专题",
"TOPIC_CALORIFIC_FRACTION": 3
},
{
"id": 0,
"userId": 1,
"topicName": "默认专题栏目",
"TOPIC_CALORIFIC_FRACTION": 1
},
{
"id": 83499744,
"userId": 1,
"topicName": "hudi数据湖",
"TOPIC_CALORIFIC_FRACTION": 1
}
],
"RES": "ok!!!!"
}
```
#### 引入 axios
axios 其本身也是一个库，就像echarts一样，我们需要通过下面的操作将这个库引入进来。
```html
<script rel="script" type="text/javascript" src="http://lsf.lingyuzhao.top:8080/LS-WebFront/js/lib/axios.min.js"></script>
```
#### 开始使用axios获取到json
我们通过axios发起请求，并在其then方法内设置回调函数，以便更好地处理获取到的json数据。但请注意，示例中使用的url具有跨域保护措施，因此您需要将您的本地IP映射为以 "lingyuzhao.top" 结尾的某个名字。如此一来，后端系统便不会阻止您获取数据，下面是被阻止之后的错误信息示例。
```
xxx.html:1 Access to XMLHttpRequest at 'http://lsb.lingyuzhao.top:8080/LS-WebBackEnd//articleController/getTop20TopicByHot' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```
当然，您也可以使用其它的url实现json数据的获取，有关如何配置 ip 映射，请访问[《配置hosts文件以实现IP映射》](http://www.lingyuzhao.top/?/linkController=/articleController&link=-80651947)
```html
<script rel="script" type="text/javascript" src="http://lsf.lingyuzhao.top:8080/LS-WebFront/js/lib/axios.min.js"></script>
<script>
// 调用axios库
axios(
{
// 在这里设置自己的后端接口地址就可以啦
url : 'http://lsb.lingyuzhao.top:8080/LS-WebBackEnd//articleController/getTop20TopicByHot'
}
).then(
(res) => {
res = res.data;
// 在这里的res就是数据了，在这里可以针对这个数据进行任意的使用。可以使用打印的方式将json数据打印出来
console.info(res)
}
)
</script>
```
此时，您可以打开您的F12终端，就可以看到json数据啦!
### axios 对接 echarts 进行可视化
到现在为止，我们了解了axios如何进行json数据的获取，也了解了如何使用echarts进行可视化，但是我们并没有了解如何将axios的数据装载到echarts中，现在就开始讲解相关知识！
#### 导入相关库
还是和之前一样，我们将两个库导入进来，就像下面一样。
```javaScript
<script rel="script" type="text/javascript" src="http://lsf.lingyuzhao.top:8080/LS-WebFront/js/lib/axios.min.js"></script>
<script rel="script" type="text/javascript" src="js/echarts.min.js"></script>
```
这样可以确保我们能够使用这两个框架，接下来，我们需要将 axios 访问后端接口的代码写出来！！
#### axios接入后端
这里的操作和之前演示的也是一样的哦！
```javaScript
// 调用axios库
axios(
{
// 在这里设置自己的后端接口地址就可以啦
url : 'http://lsb.lingyuzhao.top:8080/LS-WebBackEnd//articleController/getTop20TopicByHot'
}
).then(
(res) => {
res = res.data;
}
)
```
#### 将获取到的json进行处理
重点来啦！我们知道后端的数据并不能够直接装载给echarts ，因为结构不一样，所以在这里我们起始就是做一个结构转换的操作，echarts需要数据的列表，以及数据对应的名字的列表，因此我们需要将这两个参数提取出来，提取方式就在下面哦！
```javaScript
res = res.data;
// 在这里的res就是数据了，在这里我们将数据中的指标提取出来
// 创建一个用来存储数据的list
const dataList = [];
// 创建一个用来存储所有name的list 其中的元素要与dataList中的对应起来
const nameList = [];
// 开始提取所有数据的list
const re = res['topics'];
for (let i = 0; i < re.length; i++) {
// 在这里的就是一个数据 数据的格式如下显示
/*{
"id": 数据的id,
"userId": 专题创建者id,
"topicName": 专题名称,
"TOPIC_CALORIFIC_FRACTION": 专题热度
}*/
const reElement = re[i];
// 而我们在这里要建立的可视化图 数据的名字为 专题名称 统计的数据为热度 所以需要像下面一样进行提取
if (reElement.topicName !== '网站公告') {
// 不过由于网站公告的专题热度太高了，让其它的数据在图表上变化不明显，所以我们在这里不将网站公告的数据加进去
dataList.push(reElement.TOPIC_CALORIFIC_FRACTION)
nameList.push(reElement.topicName)
}
}
```
#### 将数据装载给 echarts
这里也是最后一步啦，我们直接将提取好的list 放在echarts配置中的对应位置，就像下面一样，到这里，图表就出现了！
```
// 获取容器元素 TODO 注意这里哦！这个元素是用来存储图表的，还记着前面说到的 id 吗，就是它！用id告诉echarts将图表存储在哪里！
const chartDom = document.getElementById('echarts_div_em');
// 初始化图表实例 这个示例其实就是图表对象 但是现在没有图，因为还没有设置数据呢，至于图怎么出来呢，继续往下看！
const myChart = echarts.init(chartDom);
// 创建配置项对象
const option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
legend: {
data:['热度']
},
xAxis: {
data: nameList
},
yAxis: {},
series: [{
name: '热度',
type: 'line',
data: dataList
}]
};
// 设置图表配置项
myChart.setOption(option);
```
#### 完整代码
```html
<!DOCTYPE HTML>
<html lang="ch-zn">
<head>
<title>Title</title>
<meta charset="GBK">
</head>
<body>
<!-- 在这里就是将 echarts 的脚本引入进来了 -->
<div id='echarts_div_em' style="width: 1024px; height: 512px">
<!-- 这里就是存储echarts 图表的元素 不知道你有没有注意到我给它设置了一个id，一会你就知道它怎么用啦 -->
</div>
</body>
</html>
<script rel="script" type="text/javascript" src="http://lsf.lingyuzhao.top:8080/LS-WebFront/js/lib/axios.min.js"></script>
<script rel="script" type="text/javascript" src="js/echarts.min.js"></script>
<script>
// 调用axios库
axios(
{
// 在这里设置自己的后端接口地址就可以啦
url : 'http://lsb.lingyuzhao.top:8080/LS-WebBackEnd//articleController/getTop20TopicByHot'
}
).then(
(res) => {
res = res.data;
// 在这里的res就是数据了，在这里我们将数据中的指标提取出来
// 创建一个用来存储数据的list
const dataList = [];
// 创建一个用来存储所有name的list 其中的元素要与dataList中的对应起来
const nameList = [];
// 开始提取所有数据的list
const re = res['topics'];
for (let i = 0; i < re.length; i++) {
// 在这里的就是一个数据 数据的格式如下显示
/*{
"id": 数据的id,
"userId": 专题创建者id,
"topicName": 专题名称,
"TOPIC_CALORIFIC_FRACTION": 专题热度
}*/
const reElement = re[i];
// 而我们在这里要建立的可视化图 数据的名字为 专题名称 统计的数据为热度 所以需要像下面一样进行提取
if (reElement.topicName !== '网站公告') {
// 不过由于网站公告的专题热度太高了，让其它的数据在图表上变化不明显，所以我们在这里不将网站公告的数据加进去
dataList.push(reElement.TOPIC_CALORIFIC_FRACTION)
nameList.push(reElement.topicName)
}
}
// 获取容器元素 TODO 注意这里哦！这个元素是用来存储图表的，还记着前面说到的 id 吗，就是它！用id告诉echarts将图表存储在哪里！
const chartDom = document.getElementById('echarts_div_em');
// 初始化图表实例 这个示例其实就是图表对象 但是现在没有图，因为还没有设置数据呢，至于图怎么出来呢，继续往下看！
const myChart = echarts.init(chartDom);
// 创建配置项对象
const option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
legend: {
data:['热度']
},
xAxis: {
data: nameList
},
yAxis: {},
series: [{
name: '热度',
type: 'line',
data: dataList
}]
};
// 设置图表配置项
myChart.setOption(option);
}
)
</script>
```
#### 最终的话
恭喜你呀，到这里，我们已经已经成功的复现出了一个简单的可视化，从`<html>`标签开始写，到现在能够处理json数据，很大的进步！这也是你的入门案例，后面的学习路线可能会很崎岖，但要保持开心！
## 更多案例
### 文章均值与总数的折柱混图可视化
#### 题目描述
访问 http://lsb.lingyuzhao.top:8080/LS-WebBackEnd//articleController/getAll?nowRow=0&count=200 后端接口连接，其会返回文章的数据，要求将每个 articleTopic 对应的文章的浏览量平均数 以及浏览量总和 获取到，并进行可视化操作
#### 获取到后端数据
```javaScript
axios(
{
url : "http://lsb.lingyuzhao.top:8080/LS-WebBackEnd//articleController/getAll?nowRow=0&count=200",
}
).then(
(res) => {
res = res.data;
}
)
```
#### 获取到均值计算需要的数据
由于我们要计算均值 所以在这里需要进行 每个 articleTopic 文章的数量的计算，以及每个 articleTopic 对应的文章的浏览量总数，因此处理逻辑如下所示。
```flow
st=>start: 文章 json 对象设为 json
cond=>condition: 当前对象的articleTopic不存在于json中
opt0=>operation: 创建以articleTopic为key的json对象
opt1=>operation: 创建{count:0, sum:0}分别代表文章数量以及浏览量之和
opt2=>operation: 提取articleTopic属性
opt3=>operation: 提取count（浏览量）属性，累加到json.articleTopic.sum,实现文章浏览量累加
opt4=>operation: 对于json.articleTopic.count属性 进行 +1 的操作,实现文章计数
opt5=>operation: json.articleTopic.sum/json.articleTopic.count 即为均值！
e=>end: 处理完毕
cond(yes)->opt0->opt1->opt2->opt3->opt4->opt5->e
cond(no)->opt2
```
因此实现逻辑如下所示
```JavaScript
res = res.data;
// 准备 专题数据存储 json 容器 其中 key 是专题id value 是专题的浏览量和文章量
let json = {}
// 将 json 数据的 trends_all 属性提取出来
let datasetElement = res['trends_all'];
// trends_all 属性对应的是一个列表，列表中包含的就是文章 因此我们在这里直接迭代列表即可
for (let i = 0; i < datasetElement.length; i++) {
// 获取到每个文章 的 json
let obj = datasetElement[i];
// 判断当前文章的专题是否有被记录
if (json[obj['articleTopic']] === undefined) {
// 代表没有被记录 所以在这里我们初始化一下 这个专题对应的数据
json[obj['articleTopic']] = {
// 分别是文章的数量以及浏览量之和
"count": 0,
"sum": 0
}
}
// 开始进行累加
let jsonElement = json[obj['articleTopic']];
// 文章数量计数
jsonElement['count']++;
// 文章浏览量求和
jsonElement['sum'] += obj['count']
}
```
#### 计算均值以及可视化需要的数据
```javaScript
// 在这里计算出均值
// 并提取出 所有专题id 总和 以及 均值
let topic_all = []
let sum_all = []
let avg_all = []
for (let jsonKey in json) {
let jsonElement1 = json[jsonKey];
// 在这里我们将 {sum:x, count:y} 变为 {count:x, sum:y, avg:x/y}
jsonElement1['avg'] = jsonElement1['sum'] / jsonElement1['count']
// 将专题 id 提供给 topic_all
topic_all.push(jsonKey)
// 然后将总和数量提供给 sum_all
sum_all.push(jsonElement1['sum'])
// 将均值数量提供给均值
avg_all.push(jsonElement1['avg'])
}
```
#### 进行可视化
```javaScript
// 获取到需要被做为图表的容器
let show = document.getElementById("show");
// 获取到 echarts 实例
let myChart = echarts.init(show);
let option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['Evaporation', 'Precipitation', 'Temperature']
},
xAxis: [
{
type: 'category',
// 设置 图表的维度 按照专题分维度 所以这里是专题的id json 的 key 正是专题的id
data: topic_all,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
// 设置名字
name: '专题浏览量总和',
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
// 设置名字
name: '专题浏览量均值',
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '专题浏览量总和',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: sum_all
},
{
name: '专题浏览量均值',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: avg_all
}
]
};
option && myChart.setOption(option);
```
### 完整代码
```HTML
<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<head>
<title>WebSocket Example</title>
</head>
<body>
<div id="show" style="width: 1024px; height: 512px">
</div>
<script rel="script" src="js/lib/axios.min.js" type="text/javascript"></script>
<script rel="script" src="js/echarts.min.js" type="text/javascript"></script>
<script>
axios(
{
url: "http://lsb.lingyuzhao.top:8080/LS-WebBackEnd//articleController/getAll?nowRow=0&count=200",
}
).then(
(res) => {
res = res.data;
// 准备 专题数据存储 json 容器 其中 key 是专题id value 是专题的浏览量和文章量
let json = {}
// 将 json 数据的 trends_all 属性提取出来
let datasetElement = res['trends_all'];
// trends_all 属性对应的是一个列表，列表中包含的就是文章 因此我们在这里直接迭代列表即可
for (let i = 0; i < datasetElement.length; i++) {
// 获取到每个文章 的 json
let obj = datasetElement[i];
// 判断当前文章的专题是否有被记录
if (json[obj['articleTopic']] === undefined) {
// 代表没有被记录 所以在这里我们初始化一下 这个专题对应的数据
json[obj['articleTopic']] = {
// 分别是文章的数量以及浏览量之和
"count": 0,
"sum": 0
}
}
// 开始进行累加
let jsonElement = json[obj['articleTopic']];
// 文章数量计数
jsonElement['count']++;
// 文章浏览量求和
jsonElement['sum'] += obj['count']
}
// 在这里计算出均值
// 并提取出 所有专题id 总和 以及 均值
let topic_all = []
let sum_all = []
let avg_all = []
for (let jsonKey in json) {
let jsonElement1 = json[jsonKey];
// 在这里我们将 {sum:x, count:y} 变为 {count:x, sum:y, avg:x/y}
jsonElement1['avg'] = jsonElement1['sum'] / jsonElement1['count']
// 将专题 id 提供给 topic_all
topic_all.push(jsonKey)
// 然后将总和数量提供给 sum_all
sum_all.push(jsonElement1['sum'])
// 将均值数量提供给均值
avg_all.push(jsonElement1['avg'])
}
// 获取到需要被做为图表的容器
let show = document.getElementById("show");
// 获取到 echarts 实例
let myChart = echarts.init(show);
let option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['Evaporation', 'Precipitation', 'Temperature']
},
xAxis: [
{
type: 'category',
// 设置 图表的维度 按照专题分维度 所以这里是专题的id json 的 key 正是专题的id
data: topic_all,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
// 设置名字
name: '专题浏览量总和',
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
// 设置名字
name: '专题浏览量均值',
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '专题浏览量总和',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: sum_all
},
{
name: '专题浏览量均值',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: avg_all
}
]
};
option && myChart.setOption(option);
}
)
</script>
</body>
</html>
```
=未完待续=
[1]: http://lsb.lingyuzhao.top:8080/LS-WebBackEnd//articleController/getTop20TopicByHot "后端数据接口链接"
[2]: http://www.lingyuzhao.top/?/linkController=/articleController&link=-28687176 "前端 json 对象数据处理方法汇总"
----
相关文章
- [《前端 json 对象数据处理方法汇总》](http://www.lingyuzhao.top/?/linkController=/articleController&link=-28687176 "《JavaScript 中的数据类型以及常见的数据处理手段》")
- [《JavaScript 中的数据类型以及常见的数据处理手段》](http://www.lingyuzhao.top/?/linkController=/articleController&link=15581853 "《JavaScript 中的数据类型以及常见的数据处理手段》")
- [《Axios与ECharts进行数据可视化案例》](http://www.lingyuzhao.top/?/linkController=/articleController&link=-15471917 "《Axios与ECharts进行数据可视化案例》")
------
***操作记录***
作者：[root](http://www.lingyuzhao.top//index.html?search=1 "root")
操作时间：2023-12-02 16:43:06 星期六
事件描述备注：保存/发布
[](如果不需要此记录可以手动删除，每次保存都会自动的追加记录)
