<!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. android MSM8974 上DeviceTree简介

    简介 主要功能是不在代码中硬编码设备信息,而是用专门的文件来描述.整个系统的设备节点会形成一个树,设备节点里可以设置属性.官网在http://www.devicetree.org .入门指南请参考ht ...

  2. Repeater导航菜单DataList产品展示

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JD.aspx.cs&quo ...

  3. C#部署安装,将用户安装路径记录下写入注册表，并启动

    安装部署程序,将安装目录写入注册表 (1)在“安装部署项目”上点击“注册表编辑器” (2)在HKey_LOCAL_MACHINE_SoftWare 下新建键 Manufacturer 代表软件的制造商 ...

  4. Nodejs之socket广播

    nodejs发送udp广播还是蛮简单的,我们先写个服务器用于接收广播数据,代码如下: var dgram = require("dgram"); var server = dgra ...

  5. Adding Value To Combo List at Runtime in Oracle Forms

    You want to add a value in Combo List item in Oracle Forms, by typing it in combo list box text area ...

  6. spring+hibernate 实体类注解问题

    <bean id="sessionFactory" class="org.springframework.orm.hibernate3.annotation.Ann ...

  7. StopWatch的使用

    //StopWatch在System.Diagnostics命名控件,要使用它就要先引用这个命名空间. //其使用方法如下: //var stopWatch = new StopWatch(); // ...

  8. 纯js写验证码

    <html> <head> <meta name="viewport" content="width=device-width" ...

  9. spring的自动装配(default-autowire="byName")

    自动装配,官方给出的定义是这样:Spring IoC容器可以自动装配(autowire)相互协作bean之间的关联关系.因此,如果可能的话,可以自 动让Spring通过检查BeanFactory中的内 ...

  10. JAVA中Response的几种用法（设定时间调整到指定页面 ....... ）

    <%@ page language="java" import="java.util.*" pageEncoding="gbk"%&g ...