<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="main" style="height:400px;"></div>

<script src="js/jquery-1.11.3.min.js"></script>

<script src="js/echarts.js"></script>

<script type="text/javascript">

    /*饼图 鼠标经过时模块放大功能 */

    // 路径配置

    require.config({

        paths: {

            echarts: 'js/'

        }

    });

    // 使用

    require(

            [

                'echarts',

                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('main'));

                setInterval(function(){

                    $.get("js.json",function(data){

                        var param = {legen:[],data:[]};

                        for(var i = 0 ;i<data.length;i++){

                            param["legen"].push(data[i]["name"]);

                            var obj = {};

                            obj.value = data[i]["age"];

                            obj.name = data[i]["name"];

                            param["data"].push(obj);

                        }

                        var option = {

                            title : {

                                text: '某站点用户访问来源',

                                subtext: '纯属虚构',

                                x:'left'

                            },

                            tooltip : {

                                trigger: 'item',

                                formatter: "{a} <br/>{b} : {c} ({d}%)"

                            },

                            legend: {

                                orient: 'vertical',

                                left: 'left',

                                data: param["legen"]

                            },

                            series : [

                                {

                                    name: '访问来源',

                                    type: 'pie',

                                    radius : '55%',

                                    center: ['50%', '60%'],

                                    data:param["data"],

                                    selectedMode:"multiple",//点击之后 扇形分离

                                    legendHoverLink:true,

                                    itemStyle: {

                                        emphasis: {

                                            shadowBlur: 10,

                                            shadowOffsetX: 0,

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

                                        }

                                    }

                                }

                            ]

                        };

                        // 为echarts对象加载数据

                        myChart.setOption(option);

                    },"json");

                },1000);

            }

    );

</script>

</body>

</html>

echarts饼图--数据交互的更多相关文章

  1. Echarts 学习系列(3)-Echarts动态数据交互

    写在前面 上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件 开发环境:win10 ...

  2. 将数据动态加载到Echarts饼图中

    需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...

  3. ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

    1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...

  4. 解决echarts饼图不显示数据为0的数据

    如图所示 饼图数据为0但是还是会显示lableline和lable 解决方法 var echartData = [{ value: data_arry[0]==0?null:data_arry[0], ...

  5. ECharts – 大数据时代，重新定义数据图表

    ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...

  6. ECharts饼图试玩

    处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...

  7. 百度ECHARTS 饼图使用心得 处理data属性

    做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...

  8. EChats+Ajax之柱状图的数据交互

    原文链接:https://blog.csdn.net/qq_37936542/article/details/79723710 一:下载 echarts.min.js 选择完整版进行下载,精简版和常用 ...

  9. ECharts饼图自定义

    [本文出自天外归云的博客园] 实现: 1.饼块可点击(点击饼块跳转到百度) 2.饼块自定义标签显示(显示个数.占比) 3.自定义标签连接线样式(虚线) 前端php代码如下: <!DOCTYPE ...

随机推荐

  1. ios获取摄像头与相册图片

    iOS的一些设备上都安装了摄像头.现在绝大多数都有了. 在编程中,我们是用相应的东西来进行照相,录像等功能.   一.UIImagePickerController类 UIImagePickerCon ...

  2. 2012 #3 Flowers

    Flowers Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  3. Recast & Detour & TerrainExport Study Feeling

    Recast Navigation和Terrain Export终于算是有点成果了.今天作一个简单的总结,顺便写一些话激励自己. 这个项目的成功对于我这个算法又烂,而又不懂3d图形学的人来说,感觉真是 ...

  4. Cheatsheet: 2014 01.01 ~ 01.14

    .NET 15 reasons why I can't work without JetBrains ReSharper Web Web scraping with Node.js Koa.js : ...

  5. VIM如何将全部内容复制并粘贴到外部

    ubuntu默认安装的vim是不支持系统剪切.粘贴版的,需要执行以下安装:sudo apt-get install vim-gnome 注意要让vim支持系统粘贴板,首先执行sudo apt-get ...

  6. Linux TOP命令详解

    先来看一下执行以后的结果: 各项数值的含义如下: 第一行是任务队列信息. :: 当前时间 up days,: 系统运行时间,格式为天,时:分 user 当前登录用户数 load average: 0. ...

  7. Servlet上下文

    Servlet上下文 运行在Java虚拟机的每一个Web应用程序都有一个与之相关的Servlet上下文. Java Servlet API提供了一个ServletContext接口来表示上下文.在这个 ...

  8. ABAP Util代码

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. Ant build ${renderscript.opt.level}问题解决方案

    问题如下: BUILD FAILEDD:\adt-bundle-windows-x86_64-20131030\sdk\tools\ant\build.xml:653: The following e ...

  10. iOS - UINavigationController

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UINavigationController : UIViewController @available(iOS 2 ...