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. php设计模式八-----装饰器模式

    1.介绍: 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构.这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装饰 ...

  2. swift 创建九宫格在后面加按钮

    项目中的需求是前面图片,在图片最后面始终有按钮如图 图片 let space:CGFloat = 10 for i in 0..model.count{ let itemWidth:CGFloat = ...

  3. Jquery($第一天)【历史】

    一．什么是jQueryjQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着越来 ...

  4. 敏捷冲刺每日报告一（Java-Team）

    第一天报告(10.25  周三) 团队:Java-Team 成员: 章辉宇(284) 吴政楠(286) 陈阳(PM:288) 韩华颂(142) 胡志权(143) github地址:https://gi ...

  5. 学号：201621123032 《Java程序设计》第13周学习总结

    1:本周学习总结 2:为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 2.1:简述你想为你的系统增加什么网络功能?设计思路是什么? 创建了一个服务器监听8080端口,通过网络助手客户 ...

  6. python的PEP8 代码风格指南

    PEP8 代码风格指南 这篇文章原文实际上来自于这里:https://www.python.org/dev/peps/pep-0008/ 知识点 代码排版 字符串引号 表达式和语句中的空格 注释 版本 ...

  7. git中级技能

    中级技能(上)               一.实验说明 从本节开始,我们会介绍一些中级和高级的用法,这些用法很少用到,前面三节的内容已经满足了日常工作需要,从本节开始的内容可以简单了解,需要的时候再 ...

  8. Swift 2.2 的新特性

    导读:本文来自SwiftGG翻译组,作者@walkingway基于苹果Swift官方博客中Ted Kremenek所撰写的"Swift 2.2 Released!"文章进行了关于S ...

  9. Linq 等式运算符：SequenceEqual

    检查元素的数量,每个元素的值及两个集合中元素的顺序是否相等,3个方面都相等则为true,否则为false IList<string> strList1 = new List<stri ...

  10. 使用pie.htc时Border-radius的兼容

    如果一个图层中(navin)使用了pie.htc来对ie6,7,8进行兼容,如若上一层(navwrap)的样式中有背景的属性,则此层 (navin) 在ie6,7,8中背景颜色不显示.如下图:此部分的 ...