Echarts：实现拖拽效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./echarts.js"></script>
</head>
<body>
<div id="myChart" style="width: 800px; height: 600px;"></div> <script type="text/javascript">
var chart = echarts.init(document.getElementById('myChart')); var originData = [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'},
]; var color = ['#4a6dbf', '#15b3bc', '#f37a18', '#83c775', ' #fcb552']; originData.forEach(function(list, i) {
list.itemStyle = {
color: color[i],
};
}); var data = [].slice.call(originData) var option = {
tooltip: {
},
toolbox: {
feature: {
myRestore: {
show: true,
title: '还原',
icon: 'M3.8,33.4 M47,18.9h9.8V8.7 M56.3,20.1 C52.1,9,40.5,0.6,26.8,2.1C12.6,3.7,1.6,16.2,2.1,30.6 M13,41.1H3.1v10.2 M3.7,39.9c4.2,11.1,15.8,19.5,29.5,18 c14.2-1.6,25.2-14.1,24.7-28.5',
onclick: refreshChart,
},
},
},
legend: { // 图例
icon: 'rect',
data: [],
itemWidth: 12,
itemHeight: 12,
bottom: 'bottom',
},
grid: {
top: '5%',
left: '5%',
right: '5%',
bottom: '40',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: true,
splitLine: { // grid上每一条竖轴线
show: true,
interval: 'auto',
lineStyle: {
color: '#e8e8e8',
},
},
axisLine: { // x刻度上方的横轴线
lineStyle: {
color: '#e8e8e8',
},
},
axisLabel: { // x轴的刻度
textStyle: {
color: '#999',
},
},
data: [],
},
yAxis: {
type: 'value',
boundaryGap: false,
axisLine: { // y刻度上方的横轴线
lineStyle: {
color: '#e8e8e8',
},
},
splitLine: { // grid上每一条竖轴线
lineStyle: {
color: '#e8e8e8',
},
},
axisLabel: { // y轴的刻度
textStyle: {
color: '#999',
},
},
},
series: [{
name: 'pie',
type: 'pie',
center: ['50%', '45%'],
radius: ['0', '45%'],
data: data,
}, {
name: '模拟一个pie容器',
type: 'pie',
center: ['50%', '45%'],
radius: ['0', '49%'],
cursor: 'default',
hoverAnimation: true,
hoverOffset: 2,
label: {
show: false,
},
labelLine: {
show: false,
},
tooltip: {
padding: 0,
formatter: function() {
return '';
},
},
z: 0,
data: [{
value: 0,
name: '容器',
itemStyle: {
color: '#000',
opacity: '.1',
},
}],
}],
}; chart.setOption(option, true); var sector = null; // 鼠标点击选中的扇形
var sectorIndex; // 选中扇形在data中的index
var sx; // 原型横坐标距离鼠标位置横坐标的偏移距离
var sy; // 原型纵坐标距离鼠标位置纵坐标的偏移距离
var zr = chart.getZr(); // 生成一个zrender实例
var circleData = null; // 记录鼠标选中的小圆点的数据
var circleEl = []; // 保存生成的小圆点的数据，注意目前只有push，没有将废数据清除 function refreshChart() {
data = [].slice.call(originData)
option.series = {
name: 'pie',
type: 'pie',
center: ['50%', '45%'],
radius: ['0', '45%'],
data: data,
}; circleEl.forEach(function(list) {
zr.remove(list.el);
});
// zr.clear(); // clear会把整个chart画布清除
sector = null;
chart.setOption(option, true);
} // chart.on 绑定的事件只能在chart图形内部执行
// 利用chart绑定的事件会比zrender绑定的事件先执行的特点来判断小圆是否进入饼图范围
chart.on('mouseup', function(params) {
if (params.componentSubType === 'pie') {
// 圆
if (circleData) {
data.push(circleData.data);
chart.setOption({
series: {
data: data,
}
});
zr.remove(circleData.el);
circleData = null;
} // 扇形
if (sector) {
zr.remove(sector);
sector = null;
}
}
}); zr.on('mousedown', function(e) {
// 如果出现：触发鼠标点击扇形事件，并且移动到echarts的DOM元素外，释放鼠标点击，
// 再移动到饼图内，点击鼠标，则会再次触发一个鼠标点击和释放事件，这时候，上一个选中的扇形不会被正确的移除
// 所以在mosuedown多一个对sector的判定
if (e.target && sector) {
zr.remove(sector);
sector = null;
}
if (e.topTarget) {
// 这个是pie容器
if (e.target && e.target.seriesIndex === 1) {
return;
} // 发现一个圆
circleEl.forEach(function(list) {
if (list.id === e.topTarget.id) {
circleData = list;
}
}); // 是一个扇形
if (!circleData && e.target && !e.target.__title) {
var target = e.target;
sectorIndex = target.dataIndex;
sector = new echarts.graphic.Sector({
shape: echarts.util.extend({}, target.shape),
style: {
fill: target.style.fill,
opacity: 0.5
},
silent: true,
z: 1000,
}); sx = e.offsetX - target.shape.cx;
sy = e.offsetY - target.shape.cy; zr.add(sector); }
}
}); zr.on('mousemove', function (e) {
if (circleData) {
circleData.el.setShape({
cx: e.offsetX,
cy: e.offsetY,
});
} else if (sector) {
sector.setShape({
cx: e.offsetX - sx,
cy: e.offsetY - sy,
}); chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: sectorIndex,
position: [e.offsetX + 24, e.offsetY + 24], // 加24是为了避免tip影响mouseup事件判定
});
}
}); zr.on('mouseup', function(e) {
if (circleData) {
circleData = null;
} if (sector) {
var circle = new echarts.graphic.Circle({
shape: {
cx: e.offsetX,
cy: e.offsetY,
r: 10,
},
style: {
text: data[sectorIndex].name + '：' + data[sectorIndex].value,
textFill: sector.style.fill,
fill: sector.style.fill,
textOffset: [0, -20],
},
silent: true,
z: 1000,
});
zr.add(circle);
circleEl.push({
id: e.topTarget.id + 1,
el: circle,
data: data[sectorIndex],
}); data.splice(sectorIndex, 1);
chart.setOption({
series: {
data: data,
}
}); zr.remove(sector);
sector = null;
}
});
</script>
</body>
</html>
这个是一年前工作里用到，莫名翻了出来。
Echarts：实现拖拽效果的更多相关文章
- jQuery的DOM操作实例（2）——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WinForm支持拖拽效果
有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
- JQ实现3D拖拽效果
<!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...
- 用JS实现版面拖拽效果
类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件 通过获取鼠标的坐标(clientX,clientY)来改变面板的位置 注意:面板使用绝对定位方式,是以左上角为参考点, ...
- Swift2.0下UICollectionViews拖拽效果的实现
文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...
- ExtJS拖拽效果
ExtJS拖拽效果 <html> <head> <title>hello</title> <meta http-equiv="conte ...
随机推荐
- IOS - 总结下swift使用GCD 多线程（二）GCD和DispatchQueue
1.前言 iOS中处理多核并发的技术有两种分别是:`Grand Central Dispatch`(以下简称`GCD`)和`NSOperationQueue`框架.iOS开发的老司机们在程序开发中处 ...
- JavaScript的书写格式及书写的注意点
JavaScript书写格式: 1.行内样式: 写在标签内部 2.内嵌样式(内联样式) : 写在一对head标签中 3.外链样式: 写在一个单独的.js文件中, 再导入进来 JavaScript书写格 ...
- 爬虫之PyQuery的base了解
爬虫之PyQuery的base了解 pyquery库是jQuery的Python实现,能够以jQuery的语法来操作解析 HTML 文档,易用性和解析速度都很好,和它差不多的还有BeautifulSo ...
- Fortify漏洞之Insecure Randomness（不安全随机数）
继续对Fortify的漏洞进行总结,本篇主要针对 Insecure Randomness 漏洞进行总结,如下: 1.Insecure Randomness(不安全随机数) 1.1.产生原因: 成弱 ...
- git 出现 fatal: remote origin already exists 错误
当输入$ git remote add origin git@github.com:djqiang(github帐号名)/gitdemo(项目名).git 出现 如下错误: 解决办法如下: 1.先输入 ...
- Map转url ,url转Map工具类
/** * 将url参数转换成map * @param param aa=11&bb=22&cc=33 * @return */ public static Map<String ...
- python相关软件安装
一. python 3 安装 Python官网 在官网下载对应系统的安装包 安装步骤 注意:有的时候安装完后会出现"Disable path length limit"的按钮,如果 ...
- Android自动化测试探索（二）常用自动化工具
Android常用自动化工具 ADB - 是Google提供的为Android编写UI测试用例的自动化工具, Android开发/测试人员不可替代的强大工具 uiautomator - 是Google ...
- mysql学习之基础篇01
大概在一周前看了燕十八老师讲解的mysql数据库视频,也跟着学了一周,我就想把我这一周所学的知识跟大家分享一下:因为是第一次写博客,所以可能会写的很烂,请大家多多包涵.文章中有不对的地方还请大家指出来 ...
- Java--8--新特性--接口中的变化！！
package InterfaceP; public interface Interface1 { default String getName(){ return "Interface1& ...