ECharts课堂（大数据可视化）基础

贫坤户～濰小城

已于 2023-03-04 23:13:53 修改

阅读量544

点赞数 1

分类专栏：课堂笔记-Echarts 文章标签： echarts 信息可视化前端

于 2023-03-02 17:03:47 首次发布

本文链接：https://blog.csdn.net/qq_61324603/article/details/129303430

版权

课堂笔记-Echarts 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本文介绍了数据可视化的概念和目的，强调其在理解和传达复杂信息中的作用。学习目标包括理解Echarts的基本概念和发展历程，并通过实际Echarts模板和销售图示例，展示了如何创建和应用Echarts图表。

摘要由CSDN通过智能技术生成

一、学习目标

了解数据可视化的基本概念
熟悉数据可视化的基本流程
了解Echarts发展历程
第一个echarts实例

二、本节任务

任务一：认识数据可视化

（一）任务描述

人数对图形、图像等可视化符号的处理效率要比对数字、文本的处理效率高很多。数据可视化的主旨是借助于图形化手段，清晰、有效地传达与沟通信息。通俗地理解，数据可视化就是将原本枯燥烦琐的数据，用更加生动形象且常人容易看懂的图形化方法表达出来。

（二）任务分解

1. 概念：

数据可视化是对数据的一种形象直观的解释，实现从不同维度观察数据，从而得到更有价值的信息。数据可视化将抽象的、复杂的、不易理解的数据转化为人眼可识别的图形、图像、符号、颜色、纹理等，这些转化后的数据通常具备较高的识别效率，能够有效地传达出数据本身所包含的有用信息。

2. 目的：

数据可视化的目的，是对数据进行可视化处理，以更明确地、有效地传递信息。可视化是人类思维认知强化的过程，即人脑通过人眼观察某个具体图形、图像来感知某个抽象事物，这个过程是一个强化认知的理解过程。

数据可视化是为了从数据中寻找三个方面的信息：模式、关系和异常。

模式：指数据中的规律，通过数据可视化分析数据规律，发现其中的周期性变化。

关系：指数据之间的相关性，在统计学中，通常代表关联性和因果关系。数据间的关系大多可分为三类：数据间的比较、数据间的构成、以及数据的分布和联系。

异常：指有问题的数据。通过异常分析，用户可以及时发现各种异常情况。

三、实例

1.Echarts框架模板

这里写了一个框架我们所有的图都基于这个框架模板来写的，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script><!--在线引入ECHARTS库-->
    <script type="text/javascript" src="js/dark.js"></script>
    <script type="text/javascript" src="js/infographic.js"></script>
    <script type="text/javascript" src="js/macarons.js"></script>
    <script type="text/javascript" src="js/roma.js"></script>
    <script type="text/javascript" src="js/shine.js"></script>
    <script type="text/javascript" src="js/vintage.js"></script><!--载入图表主题，必须下载到本地文件-->
</head>
<body>
<div id="main" style="width:800px;height:400px"></div><!--定义大小合适的DIV盒子-->
<script type="text/javascript">
    var mychart=echarts.init(document.getElementById("main"),"dark");/*创建全局变量，使用init()方法初始化容器，引入echarts.js库文件后，会自动创建一个全局变量echarts.通过echarts.init方法可以初始化Echarts实例。*/
    var option = {/*主要组件代码*/

    };/*代码主体*/
    mychart.setOption(option);/*执行方法，完成图表的绘制*/
</script>
</body>
</html>

2.第一个Echarts

按照下图来制作一个销售图

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>
    <title>Title</title>
</head>
<body>
<div id="main" style="width: 600px;height: 800px"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'),"dark");
    var option = {
        title: {
            text: '水果销售图表',
            subtext: '龙马潭',
            x:'center',
            y:'top',
            backgroundColor:'yellow',
            textStyle:{
                color:'red',
                fontSize:30,
                fontFamily:'黑体',
            }
        },
        //图表提示框主键
        tooltip:{},
        legend: {right: '20%',
            data: ['水果','谷物','肉类','日用'],
            bottom: '1%',
        },
        xAxis: {
            data: ['一店','二店','三店','四店']
        },

        yAxis: {},
        series: [{
            name:'水果',
            type:'bar',
            data:[400, 600, 280, 370 ]},{
            name:'谷物',
            type:'bar',
            data:[500, 300, 560, 250 ]},{
            name:'肉类',
            type:'line',
            data:[660, 550, 600, 400 ]},{
            name:'日用',
            type:'bar',
            data:[300, 500, 650, 550 ]}
    ]
    };
    myChart.setOption(option);
</script>
</body>
</html>