<!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. 预编译那些事＃define后面只跟一个“参数”

    一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部分内容指定编译的条件,这就是“条件编译”.有时,希望当满足某条件时对一组语句进行编译,而当条 ...

  2. BZOJ 1822 Frozen Nova 冷冻波（最大流）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1822 题意:WJJ喜欢“魔兽争霸”这个游戏.在 游戏中,巫妖是一种强大的英雄,它的技能F ...

  3. [dataTables.js error] Uncaught TypeError: myTable.row is not a function

    使用dataTables.js时遇到的问题. 代码如下: var myTable = $('#dynamic-table') .dataTable({ bAutoWidth : false, &quo ...

  4. js实现页面传值

    今天做东西用到,在网上查到了这样的一种方法,学习学习: 来源:http://bbs.csdn.net/topics/310229114 Page1: <!DOCTYPE html PUBLIC ...

  5. x名称空间中的标记拓展

    1.x:Type Type类可作为所有数据类型在编程层面上的抽象.在XAML中,如果想表达某个数据类型时就需要使用x:Type标记拓展.例子: 创建一个Button的派生类: using System ...

  6. web工程中各类地址写法的总结

    首先打一个"/" //如果地址给服务器用,那么"/"就代表该web应用 , 如果给浏览器用的,那么"/"就代表网站(其下有多个web应用) ...

  7. views中的公共代码放在一起

    在views中建立一个common.php文件,然后把views中的index.php和about.php公共代码放进去 <!doctype html> <html lang=&qu ...

  8. sgu-508 Black-white balls 概率-贝叶斯公式

    题意:有n个球,其中有0.1.2...n个黑球的概率是相等的,现在从中取出L个球,p个黑球q个白球.现在问猜一个黑球的区间,使得落在这个区间的概率大于给定的一个数值. 详见代码: #include & ...

  9. iOS - OC NSCache 缓存

    前言 NSCache 是苹果提供的一个专门用来做缓存的类,当内存 "不足" 或超过限制的时候,会自动清理缓存,使用时可以指定缓存的数量和成本.用法与 NSMutableDictio ...

  10. iOS - OC 与 Swift 互相操作

    前言 在 Swift 语言中,我们可以使用 Objective-C.C 语言编写代码,我们可以导入任意用 Objective-C 写的 Cocoa 平台框架.Objective-C 框架或 C 类库. ...