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 - 静态库的导入和头文件路径的设置
开发过程中,免不了要用到一些第三方或者是别人写好的一些Demo,这时就经常会用到别人写的一些静态库(.a文件)和n多个头文件(.h文件),这些文件不是简单地把它们拉到自己的工程里面就行的,还要设置一些 ...
- django admin日期变为可以修改
Django - 日期.时间字段 阅读目录 DateTimeField.auto_now DateTimeField.auto_now_add admin中的日期时间字段 如何将创建时间设置为“默 ...
- Python学习日记(四) 集合和元祖
元祖的特性:是一个只读列表.可以循环.可以切片,修改数据遵循'儿子'不能改但'孙子'可能可以改. iterable:可迭代对象(元祖.列表.字串.集合) 元祖宣告方式: tu = (1,2,3,['a ...
- PHP传引用/作用域 问题
$arr = [1,2,3]; foreach($arr as &$v) { //nothing todo. } foreach($arr as $v) { //nothing todo. } ...
- 用js刷剑指offer(第一个只出现一次的字符)
题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). 牛客网链接 js代码 fu ...
- SOA=SOME/IP？你低估了这件事 | 第二弹
哈喽,大家好,第二弹的时间到~上文书说到v-SOA可以通过SOC.SORS和SOS来分解落地,第一弹中已经聊了SOC的实现,这部分也是国内各大OEM正在经历的阶段,第二弹,我们继续聊 ...
- 大规模异常滥用检测：基于局部敏感哈希算法——来自Uber Engineering的实践
uber全球用户每天会产生500万条行程,保证数据的准确性至关重要.如果所有的数据都得到有效利用,t通过元数据和聚合的数据可以快速检测平台上的滥用行为,如垃圾邮件.虚假账户和付款欺诈等.放大正确的数据 ...
- window下关闭占用端口使用
怎么在window下关闭端口! 1:查看特定端口被占用情况 命令: netstat -ano 和 netstat -ano|findstr 端口号 netstat -ano:查看电脑所有端口被占用 ...
- Mybatis 不支持通配符扫包起别名问题
typeAliasesPackage 默认只能扫描某一个路径下,或以逗号等分割的 几个路径下的内容,不支持通配符和正则,采用重写的方式解决 package com.xxxx.xxx.util.comm ...
- Linux iftop 安装与参数详解
介绍 iftop是一款实时流量监控工具,监控TCP/IP连接等,缺点就是无报表功能.必须以root身份才能运行. .编译安装如果采用编译安装可以到iftop官网下载最新的源码包. 安装前需要已经安装好 ...