Echart饼图旋转
1 DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>ECharts-基本线性图及其配置要求title> 7 8 <script src="https://files.cnblogs.com/files/zjsv587/echarts.js">script> 9 head> 10 11 <body> 12 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}
{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 可以选择自己下载，修改相应的位置即可。