数据可视化

最新推荐文章于 2024-10-05 01:22:45 发布

释怀°Believe

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量636

点赞数 1

分类专栏： # 数据可视化文章标签： javascript 前端 echarts

本文链接：https://blog.csdn.net/qq_52986400/article/details/123499316

版权

数据可视化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了数据可视化的概念及其应用场景，重点讲解了ECharts这一JavaScript数据可视化库。通过实例展示了ECharts的五步使用方法，包括下载引入、DOM容器准备、初始化、配置项设定及数据绑定。同时，提到了ECharts的多种图表类型和配置项，如title、tooltip、legend等，适合前端开发者学习和实践。

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

一、什么是数据可视化

在这里插入图片描述

1.1数据可视化

❣️数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
❣️数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

1.2数据可视化的场景

目前通常有这么几大类的可视化需求：
在这里插入图片描述

1.3常见的数据可视化库

❣️D3.js，目前Web端评价最高的Javascript可视化工具库（入手难）
❣️ECharts.js 百度出的一个开源的js数据可视化库
❣️Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
❣️AntV 蚂蚁金眼全新一代数据可视化解决方案
Highcharts.js和ECharts.js就像是Office和WPS的关系

二、数据可视化项目概述

在这里插入图片描述

2.1项目展示

在这里插入图片描述

2.2项目目的

市场需求
学习阶段需求：
起着承上启下的作用
承上
❣️复习以前学习内容
❣️HTML5 + CSS3布局相关技术
❣️JavaScript\jQuery
启下
❣️为学习服务器编程做铺垫
❣️如何把服务器呈现的数据渲染到页面中

2.3项目技术

❣️HTML5+CSS3布局
❣️CSS3动画，渐变
❣️jQuery库 + 原生JS
❣️flex布局和rem适配方案
❣️图片边框border-image
❣️ES6模板字符
❣️ECharts可视化库等等
在这里插入图片描述

三、ECharts简介

是一个使用JS实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender,提供直观，交互丰富，可高度个性化定制的可视化表。

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

四、ECharts的基本使用

4.1ECharts使用五部曲❤️❤️❤️

👉步骤1：下载并也引入echarts.js文件(图表依赖这个js库）
👉步骤2：准备一个具备大小的DOM容器（生成的图表会放入到这个容器内）
👉步骤3：初始化ECharts对象（实例化ECharts对象）
👉步骤4：指定配置项和数据（option)
👉步骤5：将配置项设置给echarts实例对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
<!--        1.下载文件-->
        <script src="echarts.min.js"></script>
</head>
<body>
<!--2.准备一个盒子用来装生成的表 这个盒子必须具备大小-->
    <div class="box"></div>
    <script>
         // 3.初始化实例对象
        var myChart = echarts.init(document.querySelector('.box'));
        // 4.指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        // 5.将配置项和数据   设置给 实例对象
        myChart.setOption(option);
    </script>
</body>
</html>

4.2选择不同类型图表

在这里插入图片描述
官网-实例-官方实例

4.3相关配置讲解

❣️ title:标题组件
❣️ tooptip:提示框组件
❣️ legend:图例组件
❣️ toolbox:工具栏
❣️ grid: 直角坐标系内绘图网格
❣️ xAxis: 直角坐标系grid中的x轴
❣️ yAxis: 直角坐标系grid中的y轴
❣️ series :系列列表。每个系列通过type决定自己的图标类型
❣️ color: 调色盘颜色列表
在这里插入图片描述

❤️series: 系列列表
👊type: 类型（什么类型的图表）比如line是折线，bar柱形等
👊name: 系列名称，用于tooltip的显示，legend的图例筛选变化
👊stack:数据堆叠。如果设置相同值，则会数据堆叠。
数据堆叠：第二个数据值 = 第一个数据值 + 第二个数据值
第三个数据值 =第二个数据值 + 第三个数据值依次叠加
如果给stack指定不同值或者去点这个属性则不会发生数据堆叠