小红书数据处理+Apache-Echarts

一. Apache-Echarts 简介

数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。

Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5，我们着力加强了图表的叙事能力，让开发者可以以更简单的方式，讲述数据背后的故事。

“表·达”是 Apache ECharts 5 的核心，通过五大模块、十五项特性的全面升级，围绕可视化作品的叙事表达能力，让图“表”更能传“达”数据背后的故事，帮助开发者更轻松地创造满足各种场景需求的可视化作品。

其一是个基于 JavaScript 的 <span style="color:red">开源可视化图表库。

二. 小红书喜欢数实例

1.在 Echarts 平台中选取一个合适钟意的图

我这里选圆角环形图
1
点击下载示例

保存到 main.js 爬虫代码同级目录,pie-borderRadius.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"
    ></script>

    <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        // 初始化实例
        renderer: "canvas", // 渲染方式
        useDirtyRect: false, // 关闭脏矩形
      });
      // 用来演示的数据
      var app = {};

      // 用来演示的数据
      var option;

      option = {
        tooltip: {
          // 提示框组件
          trigger: "item",
        },
        legend: {
          // 图例组件
          top: "5%",
          left: "center",
        },
        series: [
          // 系列列表
          {
            name: "小红书课堂开课啦！", // 系列名称
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              // 图形样式
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              // 标签
              show: false,
              position: "center",
            },
            emphasis: {
              // 高亮样式
              label: {
                // 标签
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              // 标签引导线
              show: false,
            },
            data: [
              { name: "1千+", value: 75 },
              { name: "1万+", value: 61 },
              { name: "10+", value: 36 },
              { name: "4", value: 1 },
              { name: "6", value: 1 },
            ],
          },
        ],
      };

      if (option && typeof option === "object") {
        // 使用指定的配置项和数据显示图表
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize); // 监听窗口大小变化
    </script>
  </body>
</html>

在该代码中只需要改 data 值即可，我们需要分析获得在小红书爬虫爬到的数据(content.json)中的数据，

2.获取数据

创建一个包 data_process,在里面创建 pie_data.js

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
const fs = require("fs").promises;
const path = require("path");

let data = null;
let d = null;

// 定义一个异步函数来加载数据
async function loadData() {
  try {
    const filePath = path.join(__dirname, "..", "content.json");
    const fileContent = await fs.readFile(filePath, "utf8");
    data = JSON.parse(fileContent);
    // console.log('Data loaded successfully:', data);
  } catch (error) {
    console.error("Failed to load data:", error);
  }
}

// 在程序启动时调用loadData函数
loadData()
  .then(() => {
    // if (data) {
    //     console.log('Global data:', data[0].title);
    // }
    console.log("data.length", data.length);
    const dict = data.reduce((acc, item) => {
      acc[item.title] = item;
      return acc;
    }, {});

    // console.log("dict", dict)
    const dict_arr = [];
    for (const title in dict) {
      dict_arr.push(dict[title]);
    }
    // console.log("arr", arr)
    console.log("dict_arr.length", dict_arr.length);

    d = dict_arr.reduce((acc, item) => {
      let flag = false;
      for (const v of acc) {
        if (v.name === item.like) {
          v.value += 1;
          flag = true;
        }
      }
      if (flag === false) {
        acc.push({
          name: item.like,
          value: 1,
        });
      }
      return acc;
    }, []);
    console.log("data_handle\n", d);
  })
  .catch((error) => {
    // 处理加载数据时的错误
    console.error("Failed to load data during startup:", error);
  });

解析

1
2
3
4
5
const fs = require("fs").promises;
const path = require("path");

let data = null;
let d = null;

通过 require 引入依赖以及定义俩个全局变量
data 指没有处理过的原始 json 数据，即content.json中的数据
d 指经过处理后的 json 数据，即pie-borderRadius.html中所需 data 数据

1
2
3
4
5
6
7
8
9
10
11
// 定义一个异步函数来加载数据
async function loadData() {
  try {
    const filePath = path.join(__dirname, "..", "content.json");
    const fileContent = await fs.readFile(filePath, "utf8");
    data = JSON.parse(fileContent);
    // console.log('Data loaded successfully:', data);
  } catch (error) {
    console.error("Failed to load data:", error);
  }
}

该函数用来引入上级目录的 content.json 的数据，可以通过打印日志来判断是否成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 在程序启动时调用loadData函数
loadData().then(() => {
    // if (data) {
    //     console.log('Global data:', data[0].title);
    // }
    console.log("data.length", data.length)
    const dict = data.reduce((acc, item) => {
        acc[item.title] = item
        return acc
    }, {})

// console.log("dict", dict)
    const dict_arr = []
    for (const title in dict) {
        dict_arr.push(dict[title])
    }

这里通过 python 中字典与数组的定义将在 content.json 中重复的数据去除，即去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
console.log("dict_arr.length", dict_arr.length);

d = dict_arr.reduce((acc, item) => {
  let flag = false;
  for (const v of acc) {
    if (v.name === item.like) {
      v.value += 1;
      flag = true;
    }
  }
  if (flag === false) {
    acc.push({
      name: item.like,
      value: 1,
    });
  }
  return acc;
}, []);
console.log("data_handle\n", d);

这里通过遍历判断 dict_arr 数组来将 content.json 中的 like 分类并相对应的计数

1
2
3
4
}).catch(error => {
    // 处理加载数据时的错误
    console.error('Failed to load data during startup:', error);
});

通过 try catch 来处理发生错误时的逻辑，需要什么可以自行添加

3.运行

由于静态 html 在浏览器中并不支持即时 node.js 来加载数据，所以我们需要手动的运行data_process中的pie-data.js文件，并且将之全局变量 d 的运行结果手动复制到pie-borderRadius.html的 data 数据处。

在 Terminal 中进入 data_process 文件夹中,运行:

1
node pie-data.js

之后复制到 pie-borderRadius.html*的 data 数据处通过浏览器打开该 HTML 即可,如图:
2