ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，

兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），

底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

 

guanwang:http://echarts.baidu.com/index.html

使用起来也十分方便，只需引用js文件

<script type="text/javascript" src="js/echarts.common.min.js" ></script>

首先创建一个内容区：

<div id="chartmain" style="width:600px; height: 400px;"></div>

在script内配置参数，这里拿柱状图实例：

<script type="text/javascript">

        //指定图标的配置和数据

        var option = {

            title:{

                text:'ECharts 数据统计'

            },

            tooltip:{},

            legend:{

                data:['用户来源']

            },

            xAxis:{

                data:["伊芙丽","Only","乐町","秋水伊人","OECE"]

            },

            yAxis:{

            },

            series:[{

                name:'访问量',

//              type:图形形状----bar:柱状,line:折线

                type:'bar',

                data:[,,,,]

            }]

        };

        //初始化echarts实例

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

        //使用制定的配置项和数据显示图表

        myChart.setOption(option);

    </script>

饼状图：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>echarts饼状图</title>

        <script type="text/javascript" src="js/echarts.common.min.js" ></script>

    </head>

    <body>

        <div id="chartmain" style="width:600px; height: 400px;"></div>

        <script type="text/javascript">

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

        //使用制定的配置项和数据显示图表

        myChart.setOption({

             series : [{

                name: '访问来源',

                type: 'pie',

                roseType: 'angle',

    //          roseType: 'angle'------表示有层次感

                radius: '55%',

                data:[

                    {value:, name:'视频广告'},

                    {value:, name:'联盟广告'},

                    {value:, name:'邮件营销'},

                    {value:, name:'直接访问'},//设置某个扇形颜色

                    {value:,name:'搜索引擎',itemStyle: {color: 'pink'}}

                ]

            }

        ],

            itemStyle: {

            　　// 阴影的大小

            　　shadowBlur: ,

            　　// 阴影水平方向上的偏移

            　　shadowOffsetX: ,

            　　// 阴影垂直方向上的偏移

            　　shadowOffsetY: ,

            　　// 阴影颜色

            　　shadowColor: 'rgba(0, 0, 0, 0.5)',

            　　//图形颜色

            　　//color: '#c23531',

        　　}

    　　});

         </script>

    </body>

</html>

echarts.js--前端可视化数据图形的更多相关文章

  1. 前端可视化数据--echarts

    很幸运能够给大家分享我对echarts的见解,在一些大型互联网公司面试时都会问到会使用echarts么?  今天在做项目时有这个需求,有幸学习echarts. 二.echarts.js的优势与不足 优 ...

  2. echarts.js多图表数据展示使用小结

    echarts api文档: http://echarts.baidu.com/echarts2/doc/doc.html echarts demo示例: http://echarts.baidu.c ...

  3. springmvc和js前端的数据传递和接收方式

    在springmvc中controller的结果集可通过json格式传到js前端接受,也可以通过Map传给前端,具体实现如下 1,通过json格式传递 controller层实现如下 @Request ...

  4. Django结合Echarts在前端展示数据

    前言 最近在用Django写UI自动化测试平台,基本快要弄完了,但是首页只有项目列表展示,一直感觉很空旷,所以想把一些关键数据在首页展示出来. 这时就想到利用Echarts这个开源项目,但是Djang ...

  5. echarts相关的可视化数据

    echarts使用步骤: 1)设置一个容器,该容器用来放图形,一定要给容器设置高度: 2)初始化echarts实例,语法:var  aa =  echarts.init(DOM); 例如: echar ...

  6. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  7. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

  8. 用Echarts的力向导图可视化数据

    学习背景:做一个图论的题目的时候需要将结果可视化来直观的看效果,所以使用Echarts来画.感觉效果不错. Echarts下载地址:https://echarts.baidu.com/download ...

  9. echarts 移动端地图数据可视化教程

    如上效果图: 以下未代码: <!doctype html> <html lang="en">   <head> <meta charset ...

随机推荐

  1. android中与SQLite数据库相关的类

    为什么要在应用程序中使用数据库?数据库最主要的用途就是作为数据的存储容器,另外,由于可以很方便的将应用程序中的数据结构(比如C语言中的结构体)转化成数据库的表,这样我们就可以通过操作数据库来替代写一堆 ...

  2. Java高级特性之枚举

    在Java SE5之前,我们要使用枚举类型时,通常会使用static final 定义一组int常量来标识,代码如下 public static final int MAN = 0; public s ...

  3. Spring学习笔记(1)

    激发pojo的潜能,不会让pojo类继承实现或导入与Spring API相关的任何东西 那么spring怎么装配pojo呢-------->依赖注入(最大好处:松耦合) 耦合具有两面性: 一方面 ...

  4. oracle导出dmp文件的2种方法

    使用exp和expdp导出数据 1.exp导出数据命令 exp gd_base/@192.168.13.211/oanet file=D:\export\gd_base.dmp log=D:\expo ...

  5. 20155306 2017-2018-1《信息安全系统设计》第二周课堂测试以及myod的实现

    20155306 2017-2018-1<信息安全系统设计>第二周课堂测试以及myod的实现 第二周课堂测验: (注:前两项在课堂已提交,在此不做详解) 第一项: 每个.c一个文件,每个. ...

  6. 团队作业7-Beta版本冲刺计划及安排

    a.下一阶段需要改进完善的功能 对部分bug的修改,主要是在未登录时页面跳转的问题以及防止通过对数据库进行注入查询. b.下一阶段新增的功能 1.活动页面,提示打折信息等. 2.商家修改打折信息 3. ...

  7. Vue.js学习

    <!DOCTYPE html> <html> <head> <title>xxx</title> </head> <bod ...

  8. 201621123068 Week02-Java基本语法与类库

    1. 本周学习总结 1.1 当浮点数和整数放到一起运算时,java一般会将整数转化为浮点数然后进行浮点数计算,但是这样得出的结果通常与数学运算有一定误差,浮点数精确计算需要使用BigDecimal类 ...

  9. 201421123042 《Java程序设计》第7周学习总结

    1. 本周学习总结 1.1 思维导图:Java图形界面总结 2.书面作业 1. GUI中的事件处理 1.1 写出事件处理模型中最重要的几个关键词. 事件源 事件对象 事件监听器 事件适合配器 1.2 ...

  10. day-4 python多进程编程知识点汇总

    1. python多进程简介 由于Python设计的限制(我说的是咱们常用的CPython).最多只能用满1个CPU核心.Python提供了非常好用的多进程包multiprocessing,他提供了一 ...