Echarts专栏 ( 一 ) - Echarts的简单介绍和5分钟上手第一个简单Echarts

Echarts专栏 - Echarts的简单介绍和5分钟上手第一个简单Echarts

目录:

  • Echarts的基本介绍

  • 第一个Echarts程序

Echarts的基本介绍

echarts这哥们吧, 可能有的朋友熟悉, 有的闻所未闻, 但是他在我们开发中的重量是不可忽视的, 如今都是大数据时代, 不管处于哪类互联网公司, 对于数据都是相当敏感的, 对于各种庞大吞吐量的数据展示成为了我们的难题, 而echarts就是帮助我们实现数据可视化的(比如饼图, 折线图甚至热力图, 3d图等)

echarts是百度根据zRender开发的一款数据可视化的库(jQuery也是库), 目的是为了方便我们进行数据可视化的开发官方链接如下: echarts官网

上面说到echarts主要用于进行数据可视化, 可能说的有点抽象, 拿我们实际中开发的环境来说, echarts几乎要涵盖每一块开发业务领域, 比如:

  1. 电商互联网平台, 每天用户点击的商品的次数, 哪类商品用户最喜欢查看, 哪类商品卖的最多

  2. 社交平台, 每天用户聊天的即使通讯数据量, 用户的平均聊天对象数量

  3. 游戏平台, 用户当月的在线量, 来判断用户是否对游戏还保持爱好

数据可视化并不能帮助我们直接的赚钱, 但是这些看似冷冰冰的数据却可以帮助我们更好的了解自身的业务对于用户的粘性程度, 方便我们根据不同的变化做出不同的应对方式, 而这些数据, 我们需要用一种图形化的方式更加直观的展示出来, 这也是echarts存在的意义

同时利用echarts我们可以做出很多的特殊效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-89NIIxeG-1585100499657)('...')]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4KSy5q0T-1585100499660)('...')]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cqaRkxfa-1585100499661)('...')]

随着大数据时代的来临, echarts的热度会越来越高, 所以提前学习没什么不好,至少现在好多公司都会在招聘需求中直接注明需要有echarts经验

第一个Echarts实例

如果要使用echarts, 我们必须先引入他, 如果你使用过jQuery或者Vue就会明白

  1. CDN引入, 进入echartsCDN可以获取最新链接

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>第一个Echarts实例</title>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.common.min.js"></script>  
    </body>
    </html>
    
    
  2. npm, 如果是用Vue或者React脚手架亦或者是webpack项目, 我们可以使用npm来进行加载echarts包

    命令行工具敲 npm install echarts --save

    然后在文件中require进来, 如果是Vue的话import进来

我们这里会使用CDN引入的方式来进行第一个案例展示

在展示之前, 我们要知道一些概念, 首先, echarts是一个库, 这个库跟jQuery一样在全局给我们提供了一些额外操作, echarts提供了echarts全局global对象, 当我们引入了cdn以后, 就可以使用这个全局对象中的一些方法来协助我们进行操作了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Echarts实例</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.common.min.js"></script>  

    <script>
        // 我们在引入CDN以后尝试输出echarts全局global对象
        console.log(echarts);
    </script>
</body>
</html>

输出结果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7xq47TnI-1585100499662)('...')]

在这个echarts全局对象中提供一个init方法, 是用于给我们用来创建echarts图表实例的, 这个方法接受几个参数, 用于配置实例, 在这篇博客的入门中笔者只写写第一个参数, 其他的参数会在后面的博客中写出

第一个参数: 要接管的dom对象, 一个echarts实例要在页面中呈现, 那么我们必须告诉他呈现在哪个dom中

...
<div class='app'></div>
<script>
     // 我们在引入CDN以后尝试输出echarts全局global对象
        console.log(echarts);
        var app = document.querySelector('.app');
        var echarts1 = echarts.init(app);
        // 这样一个echarts1的echarts实例就生成了
        console.log(echarts1);
    </script>
</script>    
...

echarts1输出结果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xPCaIH3G-1585100499663)('...')]

echarts实例的原型上提供一个setOption方法, 该方法接收很多参数, 用来为图表注入数据或者进行其他配置服务

所有的echarts必须先使用init实例化然后紧接着调用实例方法setOption进行配置才可以在页面中进行展现

setOption的参数这里笔者先介绍几个简单的(其他参数属性未来会慢慢的都讲到)

  1. title: 该图表的标题配置,其中text属性代表该图标的一级标题 这个没什么好说的, 看了就知道

  2. xAxis: X轴的配置, 其中data属性代表在图表中展示的刻度

  3. yAxis: Y轴的配置, 其中data属性代表在图表中展示的刻度, 可以不填写, 不填写自动分配y轴刻度

  4. series: 系列配置, 其中data就是你需要展示的数据(必须符合使用图表的数据格式), type就是图表的类型(比如饼图, 折线图, 热力图等)

我的第一个柱状图

如果看了上面的属性介绍你可能还不太明白, 那么看了下面的实例我相信你肯定清晰了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Echarts实例</title>
    <style>
        .app {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
      <script src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.common.min.js"></script>  

      <div class='app'></div>
      <script>
          var echarts1 = echarts.init(document.querySelector('.app')); // 初始化echarts实例
          // 配置实例
          echarts1.setOption({
            title: {
                text: '手游火热程度'
            },
            xAxis: {
                data: ['王者荣耀', '决战平安京', '绝地求生', '奇迹暖暖']
            },
            yAxis: {},
            series: {
                type: 'bar', // 柱状图的type值填bar
                data: [30, 20, 20, 10], // 根据x轴配置的四个刻度每个刻度具体的值是多少
            }
          })

      </script>  
</body>
</html>

实现效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Be6Z6IR-1585100499664)('...')]

我的第一个饼图

...
      <script>
          var echarts1 = echarts.init(document.querySelector('.app')); // 初始化echarts实例
          // 配置实例
          echarts1.setOption({
            title: {
                text: '手游火热程度'
            },
            series: {
                names: '访问来源', 
                type: 'pie', //饼图的type值填pie

                data: [
                    {value: 10, name: '王者荣耀'},
                    {value: 20, name: '决战平安京'},
                    {value: 5, name: '绝地求生'}
                ], // 饼图的话, data的配置项又有所不同, value为具体值, name为项目名
            }
          })

      </script>  
...

实现效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ioZfbxs-1585100499664)('...')]

小提示

我们书写了两个简单的图表, 总结一下就是通过引入文件(cdn或者npm)来获得echarts全局对象, 使用init方法来实例化echarts实例, 然后通过调用实例方法setOption来对图表进行配置, 其中series可以用来配置图表的具体类型, 根据不同的类型, 配置项也会产生不同的变化, 同时我们也可以对不同的图表进行自己的个性定制化服务

OK, echarts基本情况和第一个简单实例已经写完了, 上面的配置项比如setOption还有更多的参数, 在未来的博文中, 都会一一的去介绍到, 希望可以帮助你理解好echarts的使用

发布了58 篇原创文章 · 获赞 13 · 访问量 5206
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 酷酷鲨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览