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. linux No space left on device 由索引节点(inode)爆满引发500问题

    inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读取 ...

  2. IE11,Chrome65.0.3325.146,Firefox58的webdriver驱动下载，并用selenium驱动来实现自动化测试

    各浏览器版本:    python版本: selenium版本: IE11的Webdriver下载: http://dl.pconline.com.cn/download/771640-1.html ...

  3. 『练手』手写一个独立Json算法 JsonHelper

    背景: > 一直使用 Newtonsoft.Json.dll 也算挺稳定的. > 但这个框架也挺闹心的: > 1.影响编译失败:https://www.cnblogs.com/zih ...

  4. alpha-咸鱼冲刺day1-紫仪

    总汇链接 一,合照 emmmmm.自然是没有的. 二,项目燃尽图 三,项目进展   登陆界面随意写了一下.(明天用来做测试的) 把学姐给我的模板改成了自家的个人主页界面,侧边栏啥的都弄出来了(快撒花花 ...

  5. 关于collectionView和tableView的两种cell的出列方法的区别

    相信好多人一定会对collectionView和tableView的两种cell出列方法有所疑问,下面以UICollection为例子进行举例说明 假设我们已经创建了一个collectionView, ...

  6. HTTP协议中PUT和POST使用区别

          有的观点认为,应该用POST来创建一个资源,用PUT来更新一个资源:有的观点认为,应该用PUT来创建一个资源,用POST来更新一个资源:还有的观点认为可以用PUT和POST中任何一个来做创 ...

  7. NOIP2017 列队

    https://www.luogu.org/problemnew/show/P3960 p<=500 50分 模拟 每个人的出队只会影响当前行和最后一列 p<=500,有用的行只有500行 ...

  8. win10 安装mingw ruby rails

    原文可以参考 https://ruby-china.org/topics/17581 在window10 安装ruby rails https://rubyinstaller.org/download ...

  9. 从Nest到Nesk -- 模块化Node框架的实践

    文: 达孚(沪江Web前端架构师) 本文原创,转至沪江技术 首先上一下项目地址(:>): Nest:https://github.com/nestjs/nest Nesk:https://git ...

  10. Solr搜索引擎搭建详细过程

    1    什么是solr Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr可以独立运行在Jetty.Tomcat等这些Servlet容器中 ...