大数据可视化

最新推荐文章于 2023-05-29 11:18:37 发布

Southern Wind

最新推荐文章于 2023-05-29 11:18:37 发布

阅读量4.1k

点赞数 3

分类专栏： ECharts 文章标签： echarts 数据可视化

本文链接：https://blog.csdn.net/nanchen_J/article/details/120274236

版权

ECharts 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

为什么前端要学习数据可视化？

1、市场需求：

应对现在数据可视化的趋势，很多企业场景需要用到，使用大数据可视化，让数据更加的直观，更有影响力

2、学习阶段需求：

学完布局的相关技术，后面要想着把服务器中的数据渲染到页面中

数据可视化概念：

数据可视化主要是用于图形进行清晰有效的传达与沟通信息。

数据可视化提高了数据沟通的效率

2、前端学完后后

类似于以下这种：

做这样的图表我们将使用ECharts来制作

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

使用ECharts一共分为五个步骤

第一步：引入echarts.js 或者 echarts.min.js

引入方法类似于jQuery库的引用

ECharts官网

这里建议下载min.js

复制粘贴到新建的js文件夹下

将其引入到所需的html文件中

第二步：准备盒子来包裹其中的图表

例如：

<div class="box"></div>

并对其设置宽和高

.box {
width: 400px;
height: 400px;
background-color: aqua;
}

第三步：初始化echarts实例对象

在script中初始化实例对象

var ECharts= echarts.init(document.querySelector('.box'));

第四步：指定配置项和数据

例如我想引入下图这个表格：

就直接复制文档中的script代码

 var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

第五步：将配置项设置给echarts实例对象

ECharts.setOption(option);

在浏览器中即可显示

完整代码附上：

<!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">
    <script src="JS/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script src="****.min.js"></script>
    <script>
        var myChart = echarts.init(document.querySelector('.box'))
        // var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var 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>
</body>

</html>

Southern Wind

关注

3
点赞
踩
60

收藏

觉得还不错? 一键收藏
打赏
0
评论
大数据可视化

数据可视化概念：数据可视化主要是用于图形进行清晰有效的传达与沟通信息。可以把数字转换成图形，看起来更加的直观。类似于以下这种：做这样的图表我们将使用ECharts来制作ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。使用ECharts一共分为五个步骤第一步：引入echarts.js 或者 echarts.min.js引入方法类似于jQuery库的引用ECharts官网这里建议下载min....
复制链接

扫一扫