code:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Echars|饼状图|轮循|水平翻转</title>

</head>

<body>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  <script src="https://echarts.baidu.com/examples/vendors/echarts/echarts.min.js"></script>

  <!-- demo -->

  <div id="demo" style="width: 600px;height:300px;background:#eee"></div>

  <div class="num">

    <span>直接访问</span>

    <br>

    <span></span>

  </div>

  <!-- script -->

  <script>

    var yDataList = [{

        value: ,

        name: '直接访问'

      },

      {

        value: ,

        name: '邮件营销'

      },

      {

        value: ,

        name: '联盟广告'

      },

      {

        value: ,

        name: '视频广告'

      },

      {

        value: ,

        name: '搜索引擎'

      }

    ];

    var option = {

      title: {

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

        subtext: '纯属虚构',

        x: 'center'

      },

      tooltip: {

        trigger: 'item',

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

      },

      legend: {

        orient: 'vertical',

        left: 'left',

        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']

      },

      series: [{

        name: '访问来源',

        type: 'pie',

        radius: ['50%', '70%'],

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

        data: yDataList,

        itemStyle: {

          emphasis: {

            shadowBlur: ,

            shadowOffsetX: ,

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

          }

        }

      }]

    };

    var index = -;

    var timer = null;

    var myChart = echarts.init(document.getElementById('demo'))

    myChart.setOption(option)

    myChart.on("mouseover", (e) => {

      loopStop(e.dataIndex)

    });

    this.myChart.on("mouseout", () => {

      loopStart()

    });

    loopStart()

    function loopStart() {

      clearInterval(timer)

      timer = setInterval(() => {

        myChart.dispatchAction({

          type: "downplay",

          dataIndex: index

        });

        index++

        if (index >= yDataList.length) {

          index =

        }

        myChart.dispatchAction({

          type: "highlight",

          dataIndex: index

        });

      }, );

    }

    function loopStop(i) {

      clearInterval(timer)

      myChart.dispatchAction({

        type: "downplay",

        dataIndex: index

      });

      index = i

      myChart.dispatchAction({

        type: "highlight",

        dataIndex: i

      });

    }

  </script>

  <style>

    .num {

      position: absolute;

      left: 271px;

      top: 170px;

      text-align: center;

      animation: rotate 2s linear infinite;

    }

    /* @keyframes circling{

      from{

        transform:rotate(0deg);

      }

      to{

        transform:rotate(360deg);

      }

    } */

    @keyframes rotate {

      % {

        opacity: ;

        transform: rotate(0deg);

        transform: rotateY(0deg);

        ;

      }

      % {

        opacity: ;

        transform: rotateY(360deg);

      }

      % {

        opacity: ;

        transform: rotateY(360deg);

      }

    }

  </style>

</body>

</html>

echars 饼状图 轮循 水平翻转的更多相关文章

  1. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  2. [BOT]自己动手实现android 饼状图，PieGraphView，附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  3. highcharts饼状图使用案例

    在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...

  4. arcgis api for flex之专题图制作（饼状图，柱状图等）

    最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

  5. 用CAShapeLayer实现一个简单的饼状图（PieView）

    自己写了一个简单的PieView,demo在这里:https://github.com/Phelthas/LXMPieView 效果如图: 参考了https://github.com/kevinzho ...

  6. ECharts学习（2）--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

  7. Android开源图表之树状图和饼状图的官方示例的整理

    最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...

  8. AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

    前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...

  9. jqPlot图表插件学习之饼状图和环状图

    一.准备工作 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2 ...

随机推荐

  1. MySQL实战45讲学习笔记：第三十五讲

    一.本节概述 在上一篇文章中,我和你介绍了 join 语句的两种算法,分别是 Index Nested-LoopJoin(NLJ) 和 Block Nested-Loop Join(BNL). 我们发 ...

  2. [ZJOI2019] 开关 (一种扩展性较高的做法)

    [ZJOI2019] 开关 (一种扩展性较高的做法) 题意: 有n个开关,一开始状态都为关闭.每次随机选出一个开关将其状态改变,选出第i个开关的概率为${ p_i \over \sum_{i=1}^n ...

  3. Ubuntu上的apt/apt-get等命令的实质意义和区别

    Ubuntu上的apt/apt-get等命令的实质意义和区别 一.前言 在使用apt和apt-get命令的时候我们常常会疑惑这两者有什么区别,因为大多数时间这两个命令能做很多相同的事情. 二.APT/ ...

  4. WebBrowser中html元素如何触发winform事件 z

    只要注册一下事件就可以了. C#代码如下: using System;using System.ComponentModel;using System.Windows.Forms; namespace ...

  5. FFmpeg 常用API

    一.通用API 1.1 av_register_all() 初始化 libavformat 和注册所有的复用器.解复用器和协议处理器.如果不调用这个函数,可以调用下面的三个函数来选择支持的格式. 注册 ...

  6. Java单元测试简述

    最开始项目中是没有单元测试的,基本都是自己通过各种方式来实现测试的.比如修改代码,测完再改回来:再比如直接模拟用户操作,直接当黑盒测试,然后自己去看相应的逻辑有没有,状态有没有改变. 这些方式有几个缺 ...

  7. .Net轻松处理亿级数据--ClickHouse数据操作

    该篇内容由个人博客点击跳转同步更新!转载请注明出处! 我不喜欢拿一堆数据的运行耗时来对比各个解决方案的性能等,有时候看一些测评长篇大论写耗时的一些对比,有时就差个 几百毫秒 我觉得也没啥必要,关键是好 ...

  8. 爬虫常用正则、re.findall 使用

    爬虫常用正则 爬虫经常用到的一些正则,这可以帮助我们更好地处理字符. 正则符 单字符 . : 除换行以外所有字符 [] :[aoe] [a-w] 匹配集合中任意一个字符 \d :数字 [0-9] \D ...

  9. 古老的txt下传和txt上载

    1.下传文件 TYPES:BEGIN OF TY_DATA, A2 TYPE CHAR20, B2 TYPE I, C2 TYPE CHAR20, END OF TY_DATA. DATA:IT_DA ...

  10. .NET基础知识(01)-值类型与引用类型

    常见面试题目: 1. 值类型和引用类型的区别? 2. 结构和类的区别? 3. delegate是引用类型还是值类型?enum.int[]和string呢? 4. 堆和栈的区别? 5. 什么情况下会在堆 ...