前端数据可视化插件有很多，有

  1. Highcharts（https://www.hcharts.cn/）
  2. Echarts（http://echarts.baidu.com/）
  3. D3（https://d3js.org/）
  4. amcharts （https://www.amcharts.com/）
  5. FusionCharts （https://www.fusioncharts.com/）

一、Highcharts

官网： https://www.highcharts.com.cn/index.php

下载页面：https://www.highcharts.com.cn/download

演示地址：https://www.highcharts.com.cn/demo/highcharts

文档：https://www.highcharts.com.cn/docs

Highcharts 非商业免费，商业需授权，代码开源。兼容 IE6。

Highcharts 底层为svg，方便自己定制，但图表类型有限。svg特点：

  1. 不依赖分辨率。
  2. 支持事件处理器，可以为某个元素附加JS事件处理器。
  3. 最适合带有大型渲染区域的应用程序（如谷歌地图），但复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）。
  4. 不适合游戏应用。

示例：

<html>
<head>
   <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
   <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
   <script>
     $(function () {
        $('#container').highcharts({
    chart: {
        type: 'column'
    },

    title: {
       text: 'My first Highcharts chart'
    },

    xAxis: {
        categories: ['my', 'first', 'chart']
    },

    yAxis: {
        title: {
            text: 'something'
        }
    },

    series: [{
        name: 'Jane',
        data: []}, 
       {
        name: 'John',
        data: []}]
    });
    });
   </script>
</head>

<body>
   <div id="container" style="min-width:800px;height:400px;"></div>
</body>
</html>

二、Echart

官网：https://www.echartsjs.com/zh/index.html

下载页面：https://www.echartsjs.com/zh/download.html

演示地址：https://www.echartsjs.com/examples/zh/index.html

文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

echarts是国内百度团队的产物。charts 完全免费，代码开源。

底层为canvas ，支持图表相对要多一些。canvas特点：

  1. 依赖分辨率
  2. 不支持事件处理器
  3. 弱的文本渲染能力，能够以.jpg、.png格式保存结果图像
  4. 最适合图像密集型的游戏，一旦其位置发生拜年话，其中的许多对象会被频繁重绘

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

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

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

图表可视化highcharts和百度的echarts的更多相关文章

  1. 大数据时代的图表可视化利器——highcharts,D3和百度的echarts

    大数据时代的图表可视化利器——highcharts,D3和百度的echarts https://blog.csdn.net/minidrupal/article/details/42153941   ...

  2. 只会Excel想做图表可视化，让数据动起来？可以，快来围观啦（附大量模板下载）

    前言 之前我们分享过基于echarts 的数据可视化展示,很多朋友就说,不会软件开发,可不可以直接用Excel进行数据化的展示. 答案是肯定的,确实有这种方案,百度查询一查一大推,各种解决方案各种模板 ...

  3. 将百度的ECharts整合到阿里的Weex中。

    由于公司的业务,之前PC版产品中,大量的使用了百度的ECharts库.所以现在要做移动端,在大概熟悉了Weex基本语法和搭建环境后,就着手研究如何将这两个好东西糅合起来. 首先,按照Weex官方教程, ...

  4. 图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显示

    在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...

  5. Python交互图表可视化Bokeh：1. 可视交互化原理| 基本设置

    Bokeh pandas和matplotlib就可以直接出分析的图表了,最基本的出图方式.是面向数据分析过程中出图的工具:Seaborn相比matplotlib封装了一些对数据的组合和识别的功能:用S ...

  6. 百度的echarts报表数据直接显示

    最近在使用百度的echarts开发,在使用过程中,遇到点需求,就是希望显示的数据直接在图标上显示,而不是鼠标滑动以后才显示,于是百度搜了下相关的文章正好找到了,然后使用了这个方法是可以用的,所以这里记 ...

  7. seaborn线性关系数据可视化：时间线图|热图|结构化图表可视化

    一.线性关系数据可视化lmplot( ) 表示对所统计的数据做散点图,并拟合一个一元线性回归关系. lmplot(x, y, data, hue=None, col=None, row=None, p ...

  8. 图表可视化seaborn风格和调色盘

    seaborn是基于matplotlib的python数据可视化库,提供更高层次的API封装,包括一些高级图表可视化等工具. 使用seaborn需要先安装改模块pip3 install seaborn ...

  9. Javascript图表插件HighCharts用法案例

    最近还在忙着基于ABP的项目,但本篇博客和ABP无关,喜欢ABP框架的朋友请点击传送门. 这不,最近项目基本功能做的差不多了,现在在做一个数据统计的功能,需要绘制区域图(或折线图)和饼图.一开始,楼主 ...

随机推荐

  1. Oracle Spatial分区应用研究之一：分区与分表查询性能对比

    1.名词解释 分区:将一张大表在物理上分成多个分区,逻辑上仍然是同一个表名. 分表:将一张大表拆分成多张小表,不同表有不同的表名. 两种数据组织形式的原理图如下: 图 1分表与分区的原理图 2.实验目 ...

  2. Oracle Spatial 中的弧段及弧相关拓扑错误

    1．报告说明 此报告用于验证下列问题: ORACLE SPATIAL 0.05m的最小拓扑容差值是否可以被修改 原始数据通过ARCGIS入库数据精度是否有损失 修改ORACLE SPATIAL图层的最 ...

  3. 关于ios手机上拉和下拉到底部和顶部的橡皮筋问题

    之前遇到一个问题,就是写了一个正常的移动端首页,底部是导航,上面的是内容,在安卓手机是页面滑动到底部的时候,不会再滑动的,但是问题就出现在ios手机中.页面正常布局是,导航是position:fixe ...

  4. Linux thread process and kernel mode and user mode page table

    Linux 中线程和进程切换的开销: Linux 操作系统层面的进程和线程的实现都是task_struct描述符. task_struct 包含成员变量:内核态stack.  这些都存在3-4G虚拟地 ...

  5. 各种实用的 PHP 开源库推荐【转】

    转自: https://my.oschina.net/editorial-story/blog/882780 PHP 是一种通用开源脚本语言.语法吸收了 C 语言.Java 和 Perl 的特点,利于 ...

  6. AR*客户地点分配OU

    DECLARE p_cust_acct_site_rec hz_cust_account_site_v2pub.cust_acct_site_rec_type; p_cust_site_use_rec ...

  7. Centos 安装mysql8

    Centos 安装mysql ,转载 https://www.cnblogs.com/funbin/p/11154784.html 1.下载mysql wget -i -c https://repo. ...

  8. kubernetes 实践一：基本概念和架构

    这里记录kubernetes学习和使用过程中的内容. CentOS7 k8s-1.13 flanneld-0.10 docker-18.06 etcd-3.3 kubernetes基本概念 kuber ...

  9. Fanuc Cnc 数控系统，PC端下发NC程序到CNC端，现场测试通过。

    1.这几天把FANUC 数据采集(产量,状态,轴负载等),以及NC程序下发封装成独立的dll,方便其它项目调用,自己顺便写了下demo测试,在车间测试了几天,效果很好,完善了许多细节. 2.大概的界面 ...

  10. [国家集训队] JZPKIL

    题目链接 洛谷:https://www.luogu.org/problemnew/show/P4464 Solution 这题是真的毒....数论大杂烩,窝断断续续写了两天. 众所周知: \[ {\r ...