<!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. Java中自定义异常

    /*下面做了归纳总结,欢迎批评指正*/ /*自定义异常*/ class ChushulingException extends Exception { public ChushulingExcepti ...

  2. 25 个增强iOS应用程序性能的提示和技巧 应用程序性能的提示和技巧

    初级 在开发过程中,下面这些初级技巧需要时刻注意: 1.使用ARC进行内存管理2.在适当的情况下使用reuseIdentifier3.尽可能将View设置为不透明(Opaque)4.避免臃肿的XIBs ...

  3. iOS各版本特性

    iOS1 最大特性是具有其他手机无法比拟的触屏功能,使捏拉缩放和慢性滚动变得近乎完美.从而使应用的体验变得更加自然而即时. 缺点:1.不支持复制/粘贴文本. 2.无法在发邮件时添加附件.        ...

  4. Timeout expired超时时间已到. 达到了最大池大小 错误及Max Pool Size设置

    此文章非原创,仅为分享.学习!!! 参考数据库链接串: <add key="data" value="server=192.168.1.123; port=3306 ...

  5. 线程入门之sleep

    package com.thread; /** * <sleep:使线程休眠一些时间> * <功能详细描述> * * @author 95Yang */ public clas ...

  6. 转一篇讲camera的 mb好多年不搞3d 都忘光了

    Camera定义 游戏中,Camera用来向用户展示场景,Camera就像一个摄像机,摄像机里面的景象就是Camera的展示范围,如下图所示: 在3D空间中Camera被定义为一个位置,有一个单位“方 ...

  7. JS 实现点击展开菜单

    1: 获取事件源的两种方式 2: overflow 控制展现 <%@ page language="java" import="java.util.*" ...

  8. linux学习笔记2-命令总结4

    帮助命令 help - 帮助命令 man - 获取帮助信息 用户管理命令 useradd - 添加新用户 passwd - 设置用户密码 who - 显示所有用户 w - 查看更详细的用户信息 use ...

  9. web设计经验<七>13步打造优雅的WEB字体

    今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代.下面是一些基本的关于字体的规则,特别适用于Web字体. 原文地 ...

  10. IO端口、IO内存、IO空间、内存空间的含义和联系

    1,IO空间:X86一个特有的空间,与内存空间独立的空间,同样利用IO空间可以操作数据,只不过是利用对应的IO端口操作函数,例如inb(), inbw(), inl(); outb(), outw() ...