Echart饼图旋转
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8" />
6 <title>ECharts-基本线性图及其配置要求</title>
7 <!-- ECharts单文件引入 -->
8 <script src="https://files.cnblogs.com/files/zjsv587/echarts.js"></script>
9 </head>
10
11 <body>
12 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
13 <div >
14 <div id="box" style="height:400px;width: 800px;padding: 20px;border: 1px solid red;
15 id"></div>
16
17 </div>
18
19
20 </div>
21 <script>
22
23
24 windowAddMouseWheel();
25 function windowAddMouseWheel() {
26 var minAngle = 0;
27 var startAngle = 100;
28 var scrollFunc = function (e) {
29 e = e || window.event;
30 if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
31 if (e.wheelDelta > 0) { //当滑轮向上滚动时
32
33 startAngle+=20;
34 myChart.setOption(optio = {
35 series: [{
36 minAngle: 15, //最小角度
37 startAngle:startAngle//起始角度
38 }]
39 });
40 }
41 if (e.wheelDelta < 0) { //当滑轮向下滚动时
42 startAngle-=20;
43 myChart.setOption(optio = {
44 series: [{
45 minAngle: 15, //最小角度
46 startAngle:startAngle//起始角度
47 }]
48 });
49 }
50 } else if (e.detail) { //Firefox滑轮事件
51 if (e.detail> 0) { //当滑轮向上滚动时
52 startAngle+=20;
53 myChart.setOption(optio = {
54 series: [{
55 minAngle: 15, //最小角度
56 startAngle:startAngle//起始角度
57 }]
58 });
59 }
60 if (e.detail< 0) { //当滑轮向下滚动时
61 startAngle-=20;
62 myChart.setOption(optio = {
63 series: [{
64 minAngle: 15, //最小角度
65 startAngle:startAngle//起始角度
66 }]
67 });
68 }
69 }
70 };
71 //给div绑定滑轮滚动事件
72
73 var box = document.getElementById("box");
74 if (box.addEventListener) {
75 box.addEventListener('DOMMouseScroll', scrollFunc, false);
76 }
77 //滚动滑轮触发scrollFunc方法
78 box.onmousewheel = scrollFunc;
79 }
80
81
82
83 var myChart = echarts.init(document.getElementById("box"));
84 var option = {
85 title: {
86 text: '某站点用户访问来源',
87 subtext: '纯属虚构',
88 x: 'center'
89 },
90 tooltip: {
91 trigger: 'item',
92 formatter: "{a} <br/>{b} : {c} ({d}%)"
93 },
94 legend: {
95 orient: 'vertical',
96 left: 'left',
97 data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
98 },
99 series: [{
100 name: '访问来源',
101 type: 'pie',
102 radius: '55%',
103 minAngle: 15, //最小角度
104 //startAngle: startAngle, //起始角度
105 center: ['50%', '60%'],
106 data: [{
107 value: 335,
108 name: '直接访问'
109 },
110 {
111 value: 310,
112 name: '邮件营销'
113 },
114 {
115 value: 234,
116 name: '联盟广告'
117 },
118 {
119 value: 135,
120 name: '视频广告'
121 },
122 {
123 value: 1548,
124 name: '搜索引擎'
125 }
126 ],
127 itemStyle: {
128 emphasis: {
129 shadowBlur: 10,
130 shadowOffsetX: 0,
131 shadowColor: 'rgba(0, 0, 0, 0.9)'
132 }
133 }
134 }]
135 };
136
137 myChart.setOption(option);
138 </script>
139 </body>
140
141 </html>
Echart 的JS 可以选择自己下载，修改相应的位置即可。
Echart饼图旋转的更多相关文章
- 单击Echart饼图实现数据钻取
使用场景和需求: 第一层饼图显示党员党龄分布的情况. 点击某个党龄段,查看拥有该党龄段的党支部. 默认显示3个党支部,余下的党支部合并为其它,点击其它,查看余下的党支部. 点击某个党支部,返回第一层饼 ...
- Echart饼图、柱状图、折线图(pie、bar、line)加入点击事件
var myChart= echarts.init(document.getElementById('myChart')); myChart.on('click', function (param) ...
- echart 饼图数据为0不显示或者太小显示其他的解决办法
饼图数据为0或者太小显示如下,不美观 解决办法: 为0的去掉,小于0.005的累加起来 方法 function getsData(_rowData){ var rowData=JSON.parse(J ...
- echart 饼图图例legend支持滑动
ps: 以下针对option操作 文章目录 图例过多加上滚动条图例形状图例自定义显示图例过多加上滚动条 legend:{ top:'50', bottom:'50', type:'scroll',} ...
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
- Echarts事件
Echart饼图.柱状图.折线图(pie.bar.line)添加点击事件发布日期:2014年08月10日 来源:PHP1.CN 点击:250638摘要:var myChart= echar ...
- HTML5 例子学习 HT 图形组件
HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...
- Matplot相关(二)——统计图
Matplotlib:其能够支持所有的2D作图和部分3D作图.能通过交互环境做出印刷质量的图像. ————————缩写定义———————— import matplot.pyplot as plt — ...
- 【Android】自己定义View
翻译自:http://developer.android.com/training/custom-views/index.html 一)创建view类 一个设计良好的自己定义view与其它的类一样.它 ...
随机推荐
- java 对象之间的复制
package com.jy.demo.web; import java.util.Date; public class People { private String name;//姓名 priva ...
- 四. SpringCloud负载均衡与调用
1. Ribbon概述 1.1 Ribbon是什么 SpringCloud Ribbon是基于Netflix Ribbon实现的一套客户端,是负载均衡的工具. Ribbon是Netflix发布的开源项 ...
- CentOS 7 部署redis
1.下载redis: 地址:http://download.redis.io/releases/: 选择需要下载的版本,然后通过ssh工具导入到centos中,这里放到了/usr/local; 解压文 ...
- docker（2）CentOS 7安装docker环境
前言 前面一篇学了mac安装docker,这篇来学习在linux上安装docker 环境准备 Docker支持以下的CentOS版本,目前,CentOS 仅发行版本中的内核支持 Docker. Doc ...
- AYIT-2020 609暑假集训第一周周赛题 A - A计划
可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后,而今,不幸的她再一次面临生命的考验.魔王已经发出消息说将在T时刻吃掉公主,因为他听信谣言说吃公主的肉也能长生不老.年迈的国王正是心急如焚,告招天下 ...
- 【uva 11082】Matrix Decompressing（图论--网络流最大流 Dinic+拆点二分图匹配）
题意:有一个N行M列的正整数矩阵,输入N个前1~N行所有元素之和,以及M个前1~M列所有元素之和.要求找一个满足这些条件,并且矩阵中的元素都是1~20之间的正整数的矩阵.输入保证有解,而且1≤N,M≤ ...
- Codeforces Round #650 (Div. 3) D. Task On The Board (构造,贪心)
题意:有一个字符串和一组数,可以对字符串删去任意字符后为数组的长度,且可以随意排序,要求修改后的字符串的每个位置上的字符满足:其余大于它的字符的位置减去当前位置绝对值之和等于对应序列位置上的数. 题解 ...
- Java进阶专题(二十五) 分布式锁原理与实现
前言 现如今很多系统都会基于分布式或微服务思想完成对系统的架构设计.那么在这一个系统中,就会存在若干个微服务,而且服务间也会产生相互通信调用.那么既然产生了服务调用,就必然会存在服务调用延迟或失败 ...
- Gitlab日常维护（三）之Gitlab的备份、迁移、升级
一.Gitlab的备份 使用Gitlab一键安装包安装Gitlab非常简单, 同样的备份恢复与迁移也非常简单. 使用一条命令即可创建完整的Gitlab备份 [root@gitlab ~]# gitla ...
- Eazfuscator.NET(.net混淆工具)
软件功能 调试支持: 在你的程序集被Eazfuscator.NET混淆后,它不会成为不可调试混乱的砖块.你总是可以得到一个行号,出现未处理的异常,查看可读的堆栈跟踪,甚至附加调试器来遍历你的模糊代码. ...