<!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. .NetDOM操作--un

    DOM操作操作相关元素:里:children(),find("选择器")外:parent(),parents("选择器")下:next(),nextAll(选择 ...

  2. 用PyAIML开发简单的对话机器人

    AIML files are a subset of Extensible Mark-up Language (XML) that can store different text patterns ...

  3. Get_File_Name Usage in Oracle Forms 6i

    Get_File_Name is built-in function of Oracle Forms 6i, used to get the file name with address by bro ...

  4. Python渗透测试工具合集

    摘自:http://www.freebuf.com/tools/94777.html 如果你热爱漏洞研究.逆向工程或者渗透测试,我强烈推荐你使用 Python 作为编程语言.它包含大量实用的库和工具, ...

  5. [CVE:2013-4810]Apache Tomcat/JBoss远程命令执行

    <?php $host=gethostbyname($argv[1]); $port=$argv[2]; $cmd=$argv[3]; //small jsp shell //change th ...

  6. python进程、线程、协程（转载）

    python 线程与进程简介 进程与线程的历史 我们都知道计算机是由硬件和软件组成的.硬件中的CPU是计算机的核心,它承担计算机的所有任务. 操作系统是运行在硬件之上的软件,是计算机的管理者,它负责资 ...

  7. 如何在VirtualBox虚拟机软件上安装Win7虚拟系统

    在Windows系统中安装VirtualBox 双击从官网上下载的VirtualBox-4.3.12-93733-Win.exe安装程序,默认下一步,下一步完成基础安装. 在VirtualBox虚拟机 ...

  8. Java 实现阶乘算法

    阶乘算法如下: 以下列出 0 至 20 的阶乘: 0!=1,(0 的阶乘是存在的) 1!=1, 2!=2, 3!=6, 4!=24, 5!=120, 6!=720, 7!=5040, 8!=40320 ...

  9. 个人博客作业WEEK 1

    一.项目时间规划与实际用时 PSP2.1 Personal Software Process Stages 预计时间/h 实际时间/h Planning 计划   · Estimate · 估计这个任 ...

  10. 04 SQL是关于集合的

    面向集合去思考 要想成为写SQL语句的高级专家, 最困难的是一个转变就是从面相过程的思维方式转变到面相集合的思维方式. 首先要停止那些一次处理一行数据的过程化步骤思维, 试着把思路转移到使用类似于 “ ...