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. drbd(二)：配置和使用

    本文目录:1.drbd配置文件2.创建metadata区并计算metadata区的大小3.启动drbd4.实现drbd主从同步5.数据同步和主从角色切换6.drbd脑裂后的解决办法7.drbd多卷组配 ...

  2. 使用jmeter+ant进行接口自动化测试(数据驱动)之一：设计jmeter脚本

    最近在做接口测试,因为公司有使用jmeter做接口测试的相关培训资料,所以还是先选择使用jmeter来批量管理接口,进行自动化测试.话不多说,进入正题: 1.使用csv文件保存接口测试用例,方便后期对 ...

  3. C语言第二次博客作业—分支结构

    一.PTA实验作业 题目1:计算分段函数 1.实验代码 double x,y; scanf("%lf",&x); if(x>=0){ y=sqrt(x); print ...

  4. 在django模板中添加jquery

    路径 /project_name /app_name /templates /index.html /project_name setting.py /static /js jquery.js 导入方 ...

  5. Django 模型层

    基本操作 1.meta类属性汇总 属性名 用法 举例代码 abstract 如果设置abstract=True则这个模式是一个抽象基类   db_table 定义model在数据库中的表名称,如果不定 ...

  6. Syabse数据库无法启动的解决方案

    在探讨本问题之前,首先要为大家解释一下Syabse数据库本身.Syabse数据库应用和本身的架构相对而言都相对比较复杂,多数技术人员及公司对Sybase数据库底层结构和运行机制也处于并非完全了解的阶段 ...

  7. var、let、const区别

    1.let不存在变量提升,必须升明后才可用. 'use strict'; (function(){ console.log(varTest); console.log(letTest); var va ...

  8. JAVA_SE基础——64.StringBuffer类 ①

     字符串特点:字符串是常量:它们的值在创建之后不能更改 字符串的内容一旦发生了变化,那么马上会创建一个新的对象. 注意:字符串的内容不适宜频繁修改,因为一旦修改马上就会创建一个新的对象. publ ...

  9. 学习phalcon框架按照官网手册搭建第一个项目注册功能

    中文手册官网:http://phalcon.ipanta.com/1.3/tutorial.html#bootstrap 官网提供http://www.tutorial.com项目源码github地址 ...

  10. 从PRISM开始学WPF（九）交互（完结）

    0x07交互 Notification xaml: <Window x:Class="UsingPopupWindowAction.Views.MainWindow" xml ...