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与其它的类一样.它 ...
随机推荐
- （30）Linux文本处理
1.cat命令:连接文件并打印输出到标准输出设备 cat 命令可以用来显示文本文件的内容(类似于 DOS 下的 type 命令),也可以把几个文件内容附加到另一个文件中,即连接合并文件. cat 命令 ...
- XV6学习（12）Lab lock: Parallelism/locking
代码在github上 这一次实验是要对XV6内部的锁进行优化,减少锁争用,提高系统的性能. Memory allocator (moderate) 第一个实验是对XV6内核的内存页面分配器进行改进,改 ...
- 配置VS2013 + opencv 2.4.10
其实我内心是极力反对装这么老的版本的,但是要交课堂作业~~好无奈 [注] : 如果按照本文配置不成功,可以试一下其他博客里面的配置(多试一试总能成功的) https://jingyan.baidu.c ...
- zjnu1730 PIRAMIDA(字符串，模拟)
Description Sample Input 6 JANJETINA 5 1 J 1 A 6 N 6 I 5 E Sample Output 1 0 2 1 1 题意:给你一个长度小于等于10^6 ...
- 1006 How many?
Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 36 Accepted: 2 Description 有一天,小Q给了小J ...
- codeforces 128B. String
time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...
- c语言中qsort函数的使用、编程中的一些错误
qsort()函数: 功能:相当于c++sort,具有快排的功能,复杂度的话nlog(n)注:C中的qsort()采用的是快排算法,C++的sort()则是改进的快排算法.两者的时间复杂度都是nlog ...
- 洛谷P1144-最短路计数-最短路变形
洛谷P1144-最短路计数 题目描述: 给出一个\(N\)个顶点\(M\)条边的无向无权图,顶点编号为\(1-N\).问从顶点\(1\)开始,到其他每个点的最短路有几条. 思路: \(Dijkstra ...
- ELK Stack 介绍 & Logstash 日志收集
ELK Stack 组成 Software Description Function E:Elasticsearch Java 程序 存储,查询日志 L:Logstash Java 程序 收集.过滤日 ...
- mybatis(十一)mybatis常见问题
用注解还是用 xml 配置? 常用注解:@Insert.@Select.@Update.@Delete.@Param.@Results. @Result 在 MyBatis 的工程中,我们有两种配置 ...