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使用Test测试接口类
package com.jy.demo.web; import java.util.Map; import org.junit.BeforeClass; import org.junit.Test; ...
- 学习一下 SpringCloud （四）-- 服务降级、熔断 Hystrix、Sentinel
(1) 相关博文地址: 学习一下 SpringCloud (一)-- 从单体架构到微服务架构.代码拆分(maven 聚合): https://www.cnblogs.com/l-y-h/p/14105 ...
- Java并发包源码学习系列：阻塞队列实现之LinkedTransferQueue源码解析
目录 LinkedTransferQueue概述 TransferQueue 类图结构及重要字段 Node节点 前置:xfer方法的定义 队列操作三大类 插入元素put.add.offer 获取元素t ...
- python自动化之使用allure生成测试报告
Allure测试报告框架帮助你轻松实现"高大上"报告展示.本文通过示例演示如何从0到1集成Allure测试框架.重点展示了如何将Allure集成到已有的自动化测试工程中.以及如何实 ...
- 3. Linear Regression with Multiple Variables
前面还有一章主要讲解,基本的Linear Algebra线性代数的知识,都比较简单,这里就直接跳过了. Speaker: Andrew Ng 1. Multiple featues 训练集的特征变成了 ...
- Java_web项目中在Java文件里面通过类装载器对资源文件读取
承接上一节:在eclipse完成对Java_web项目里面资源文件的读取 我们首先在src目录下创建一个资源文件db.properties 内容如下: url=127.0.0.1 name=root ...
- springboot源码解析-管中窥豹系列之BeanDefinition（八）
一.前言 Springboot源码解析是一件大工程,逐行逐句的去研究代码,会很枯燥,也不容易坚持下去. 我们不追求大而全,而是试着每次去研究一个小知识点,最终聚沙成塔,这就是我们的springboot ...
- CentOS6下mysql的安装与配置
CentOS是免费的.开源的.可以重新分发的开源操作系统,CentOS(Community Enterprise Operating System,中文意思是社区企业操作系统)是Linux发行版之一. ...
- Operating System：信号量
pv原语操作(1)操作系统PV意思:PV操作与信号量的处理相关,P表示通过的意度思,V表示释放的意思.(2)p操作和v操作是不可中断问的程序段,称为原语.如果将信号量看作共享变量,则pv操作为其临界区 ...
- Qt开发Activex笔记（一）：环境搭建、基础开发流程和演示Demo
前言 使用C#开发动画,绘图性能跟不上,更换方案使用Qt开发Qt的控件制作成OCX以供C#调用,而activex则是ocx的更高级形式. QtCreator是没有Active控件项目的,所有需要 ...