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 ...
随机推荐
- 原生JS获取HTML DOM元素的8种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- Android JSBridge原理与实现
在Android中,JSBridge已经不是什么新鲜的事物了,各家的实现方式也略有差异.大多数人都知道WebView存在一个漏洞,详细信息见你不知道的 Android WebView 使用漏洞,虽然该 ...
- vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...
- mysql简单优化的一些总结
mysql对cpu的利用特点: 5.1之前,多核支持较弱:5.1可利用4个核:5.5可利用24核:5.6可利用64个核:每个连接对应一个线程,每个并发query只能使用一个核 mysql对内存的利用特 ...
- 用js刷剑指offer(把数组排成最小的数)
题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路 对ve ...
- java中List集合
List集合是一个元素有序可以重复的集合,集合中每个元素都有其对应的顺序索引.List集合允许使用重复集合,前面博客写到Set不允许有重复集合.List集合可以通过索引来访问指定位置的集合元素. Li ...
- 帝国CMS熊掌号数据主动推送插件【原创】
因为昨晚一个朋友他是帝国CMS做的网站,叫我给他做个熊掌号改造和熊掌号推送,所以花了一个小时时间做了这个插件,有需要的朋友可以拿去. 第一步:在后台执行以下数据库语句: CREATE TABLE `b ...
- pandas数据类型判断（三）数据判断
1.函数:空值判断 1)判断数值是否为空用 pd.isna,pd.isnull,np.isnan2)判断字符串是否为空用 pd.isna,pd.isnull:3)判断时间是否为空用 pd.isna,p ...
- 3D-2D透视投影数学推导
请尊重作者,禁止私自盗用图片!
- 洛谷 AT2434 JOI 公園 (JOI Park) 题解
人生第一次AC黑题,我太感动了. 每日一题 day31 打卡 Analysis 先跑遍DJ,求出1到 i的最短路.得到每个点到 1号点的距离后,从小到大排序一遍,这时便可以枚举每个点到 1号点的距离修 ...