数据可视化--实验一：可视化开发环境及搭建

数据可视化–实验一：可视化开发环境及搭建文章目录数据可视化--实验一：可视化开发环境及搭建概要实验过程Echarts.jspyechartsTableau概要学院：计算机科学与技术学院实验日期：2020-10-13实验目的：掌握并安装常用的可视化工具实验内容：从以下几类工具中选择3种，分别实现一个小案例的绘制：编程类工具：D3.js、Echarts.js、pyecharts(Python)、 P

BlingblingFu

3242人浏览 · 2021-01-01 17:48:38

BlingblingFu · 2021-01-01 17:48:38 发布

声明：本文CSDN作者原创投稿文章，未经许可禁止任何形式的转载，原文链接

文章目录

概要

学院：计算机科学与技术学院
实验日期：2020-10-13
实验目的：掌握并安装常用的可视化工具
实验内容：从以下几类工具中选择3种，分别实现一个小案例的绘制：
- 编程类工具：D3.js、Echarts.js、pyecharts(Python)、 Processing、 R（至少选两种）
- 交互式工具：Tableau、penRefine（至多选一种）
- 数据任选

实验过程

本次实验选择编程类工具Echarts.js和pyecharts，交互式工具Tableau。

Echarts.js

使用WebStorm新建Nodejs项目，并使用npm安装Echarts.js和Webpack
在app.js文件中编写逻辑代码，在index.html文件中编写样式代码。

app.js代码如下

/**
 * @name        app.js
 * @author      F
 * @Time        2020/10/13 18:49
 * @description 数据可视化实验一：Echarts.js使用示例
 */
var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: '数据可视化实验一'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [15, 20, 36, 10, 10, 20]
    }]
});

index.html代码如下

<!--Name:   index.html-->
<!--Author: F-->
<!--Time:   2020/10/13 18:49-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化实验一</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript" src='bundle.js/main.js'></script>
</html>

执行webpack之后（执行方法见实验三最后）在浏览器中打开index.html，结果如下：

Echarts.js样例实验完成。

pyecharts

在Pycharm中新建Python项目，并使用pip安装pyecharts
在main.py文件中编写逻辑代码，代码如下

#!/usr/bin/env python
# coding:utf-8
"""
Name    : main.py
Author  : F
Time    : 2020/10/13 20:47
Desc    : 数据可视化实验一：pyecharts使用实例
"""
from pyecharts.charts import Bar

bar = Bar()
bar.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
bar.add_yaxis('数据可视化实验一', [5, 20, 36, 10, 75, 90])
# render 会生成本地 HTML 文件，默认会在当前目录生成 render.html 文件
# 也可以传入路径参数，如 bar.render("mycharts.html")
bar.render()