百度echarts扇形图每个区块增加点击事件
效果图：
操作人员要求 ：我想看这个扇形图对应的 页面信息，给我加个链接跳转；原先的chart.js发现没有api，后来改用百度的echart.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echart学习</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="width:800px; border:2px solid red"><!--插件图外面的盒子决定里面的宽度-->
<div id="main" style="height:400px"></div>
<span id="hover-console" style="color:#1e90ff">Event Console : 【hover】 seriesIndex : 1 dataIndex : 12</span>
</div> <!--
<script src="js/echarts-all.js" charset="utf-8"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
<script type="text/javascript"> var nowColor="";
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main')); option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true}
}
},
calculable : false, //拖拽
series : [
{
name:'访问来源',
type:'pie', //这里指定类型
radius : '55%',
center: ['50%', '60%'],
itemStyle:{
normal: {
color: function(params) {//柱子颜色 var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
return colorList[params.dataIndex]
}
} }, data:[
{
value:335,
name:'直接访问',
itemStyle: {
emphasis: {color: '#333'} //emphasis 鼠标移上去 区块 的颜色
}
},
{
value:310,
name:'邮件营销',
itemStyle: {
emphasis: {color: '#666'}
}
},
{
value:234,
name:'联盟广告',
itemStyle: {
emphasis: {color: '#999'}
}
},
{
value:135,
name:'视频广告',
itemStyle: {
emphasis: {color: '#ggg'}
}
},
]
}
]
}; // 为echarts对象加载数据
myChart.setOption(option); var data_url=['http://www.qq.com/','http://www.baidu.com/','http://www.sina.com/','http://www.163.com/','http://www.tmall.com/']; function everyClick(param,i,txt,url){ //程序这边的url需要传入
if(param.seriesIndex==0&¶m.dataIndex==i){
confirm("确定打开新链接？"+txt)&&window.open (url,'_parent','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
}
} //增加监听事件
function eConsole(param) {
//var mes = '【' + param.type + '】';
if (typeof param.seriesIndex != 'undefined') {
// mes += ' seriesIndex : ' + param.seriesIndex;
// mes += ' dataIndex : ' + param.dataIndex;
if (param.type == 'click') {
var peiLenght= option.legend.data.length;
// alert(peiLenght);// 获取总共给分隔的扇形数
for(var i=0;i<peiLenght;i++){
everyClick(param,i,option.legend.data[i],data_url[i])
}
}else{ document.getElementById('hover-console').innerHTML = 'Event Console : ' + param.dataIndex;
//alert();
} }
} myChart.on("click", eConsole);
myChart.on("hover", eConsole); </script>
</body>
</html>
参考写的类似的 pie 饼状图
效果如下
代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 1px solid #A4E2F9;
}
.toolTip{ position: absolute; left: 50px; width: 200px; text-align: center; top: 10px; border: 2px solid red;}
</style>
</head>
<body> <div height="400" width="600" style="margin:50px; position: relative;">
<canvas id="chart"> 你的浏览器不支持HTML5 canvas </canvas>
</div> <script type="text/javascript">
function goChart(dataArr){ // 把角度转换为弧度
function angleToRadian( angle ) {
return Math.PI / 180 * angle;
// var val=Math.PI / 180 * angle;
// var num=num||2;
// var m= Math.pow(10,num)
//
// return parseInt(val * m, 10) / m; } // 弧度 换为角度
function RadianToangle( hd,num ) {
var val=180/Math.PI * hd;
var num=num||2; var m= Math.pow(10,num) return parseInt(val * m, 10) / m; } toolTip("toolTip","con2222tent")
function toolTip(ele,content,event){ var toolTipDiv=document.querySelector("."+ele); if(!toolTipDiv){
toolTipDiv=document.createElement("div");
toolTipDiv.className =ele;
document.body.appendChild(toolTipDiv);
console.log("没有");
} document.querySelector("."+ele).innerHTML='<div class="toolTipClass">'+content+'</div>'; //
//
// var left = toolTipDiv.offsetLeft+200;
// var top = toolTipDiv.offsetTop - 10;
// toolTipDiv.style.left = left + 'px';
// toolTipDiv.style.top = top + 'px'; }; var animated=false;
// 声明所需变量
var canvas,ctx;
// 图表属性
var cWidth, cHeight, cMargin, cSpace;
// 饼状图属性
var radius,ox,oy;//半径 圆心
var tWidth, tHeight;//图例宽高
var posX, posY, textX, textY;
var startAngle, endAngle;
var totleNb;
// 运动相关变量
var ctr, numctr, speed;
//鼠标移动
var mousePosition = {}; //线条和文字
var lineStartAngle,line,textPadding,textMoveDis; // 获得canvas上下文
canvas = document.getElementById("chart");
if(canvas && canvas.getContext){
ctx = canvas.getContext("2d");
}
initChart(); // 图表初始化
function initChart(){
// 图表信息
cMargin = 20;
cSpace = 40; canvas.width = canvas.parentNode.getAttribute("width")* 2 ;
canvas.height = canvas.parentNode.getAttribute("height")* 2;
canvas.style.height = canvas.height/2 + "px";
canvas.style.width = canvas.width/2 + "px";
cHeight = canvas.height - cMargin*2;
cWidth = canvas.width - cMargin*2; //饼状图信息
radius = cHeight*2/6; //半径 高度的2/6
ox = canvas.width/2 + cSpace; //圆心
oy = canvas.height/2;
tWidth = 60; //图例宽和高
tHeight = 20;
posX = cMargin;
posY = cMargin; //
textX = posX + tWidth + 15
textY = posY + 18;
startAngle = endAngle = 90*Math.PI/180; //起始弧度 结束弧度 //将传入的数据转化百分比
totleNb = 0;
new_data_arr = [];
for (var i = 0; i < dataArr.length; i++){
totleNb += dataArr[i][0];
} console.log("总数值totleNb",totleNb);
for (var i = 0; i < dataArr.length; i++){
new_data_arr.push( dataArr[i][0]/totleNb );
} // 运动相关
ctr = 3;//初始步骤
numctr = 50;//步骤
speed = 1.2; //毫秒 timer速度 //指示线 和 文字
lineStartAngle = -startAngle;
line=40; //画线的时候超出半径的一段线长
textPadding=10; //文字与线之间的间距
textMoveDis = 200; //文字运动开始的间距
} console.log("每个 百分比 new_data_arr",new_data_arr); drawMarkers();
//绘制比例图及文字
function drawMarkers(){
ctx.textAlign="left";
for (var i = 0; i < dataArr.length; i++){
//绘制比例图及文字
ctx.fillStyle = dataArr[i][1];
ctx.fillRect(posX, posY + 40 * i, tWidth, tHeight);
ctx.moveTo(posX, posY + 40 * i);
ctx.font = 'normal 24px 微软雅黑'; //斜体 30像素 微软雅黑字体
ctx.fillStyle = dataArr[i][1]; //"#000000";
var percent = dataArr[i][2] + "：" + parseInt(100 * new_data_arr[i]) + "%";
ctx.fillText(percent, textX, textY + 40 * i);
}
}; //绘制动画
pieDraw();
function pieDraw(mouseMove,type){ //设置旋转
ctx.save();
ctx.translate(ox, oy);
ctx.rotate((Math.PI*2/numctr)*ctr/2); var percent=ctr/numctr;//运动的百分比 for (var j = 0; j < dataArr.length; j++){ //绘制饼图
//endAngle = endAngle + (new_data_arr[j]*percent)* Math.PI * 2; //结束弧度 endAngle = endAngle + (new_data_arr[j]*percent)* Math.PI * 2; //结束弧度 ctx.beginPath(); ctx.moveTo(0,0); //移动到到圆心
ctx.arc(0, 0, radius*ctr/numctr, startAngle, endAngle, false); //绘制圆弧 //ctx.moveTo(ox, oy); //移动到到圆心
//ctx.arc(ox, oy, radius, startAngle, endAngle, false); //绘制圆弧
//ctx.arc(ox, oy, radius*percent, startAngle, endAngle, false); //绘制圆弧 ctx.fillStyle = dataArr[j][1];
if(mouseMove && ctx.isPointInPath(mousePosition.x*2, mousePosition.y*2)){
//ctx.globalAlpha = 0.3;
var hoverClass=dataArr[j][3];
//console.log("当前",j,dataArr[j],"hoverClass",hoverClass);
ctx.fillStyle = dataArr[j][3]; //toolTip("toolTip","con2222tent")
toolTip("toolTip",dataArr[j][2]+dataArr[j][0],mousePosition)
if(type=="click"){
alert(dataArr[j]+"当前选择的是 "+dataArr[j][2]+dataArr[j][0]);
}
} ctx.fill();
ctx.globalAlpha = 1; ctx.closePath(); startAngle = endAngle; //设置起始弧度
if( j == dataArr.length-1 ){
startAngle = endAngle =90*Math.PI/180; //起始弧度 结束弧度
} } ctx.restore();
//console.log("ctr",ctr,"numctr",numctr,(ctr/numctr).toFixed(2)); if(ctr<numctr){
ctr++;
setTimeout(function(){
//ctx.clearRect(-canvas.width,-canvas.width,canvas.width*2, canvas.height*2);
ctx.clearRect(-canvas.width, -canvas.height,canvas.width*2, canvas.height*2);
drawMarkers();
pieDraw();
}, speed*=1.02);
}//ctr<numctr }//pieDraw end //监听鼠标移动
var mouseTimer = null;
canvas.addEventListener("mousemove",function(e){
e = e || window.event;
if( e.offsetX || e.offsetX==0 ){
mousePosition.x = e.offsetX;
mousePosition.y = e.offsetY;
}else if( e.layerX || e.layerX==0 ){
mousePosition.x = e.layerX;
mousePosition.y = e.layerY;
} clearTimeout(mouseTimer);
mouseTimer = setTimeout(function(){
ctx.clearRect(0,0,canvas.width, canvas.height);
drawMarkers();
pieDraw(true,"hover");
},10);
});////监听鼠标移动 end canvas.addEventListener("click",function(e){
e = e || window.event;
if( e.offsetX || e.offsetX==0 ){
mousePosition.x = e.offsetX;
mousePosition.y = e.offsetY;
}else if( e.layerX || e.layerX==0 ){
mousePosition.x = e.layerX;
mousePosition.y = e.layerY;
} ctx.clearRect(0,0,canvas.width, canvas.height);
drawMarkers();
pieDraw(true,"click"); });////监听鼠标移动 end //本文地址：http://www.cnblogs.com/surfaces/
} var chartData = [ [50,"#2dc6c8","瓜子1","red"], [12.5,"#b6a2dd", "花生2","blue"], [12.5,"#5ab1ee","土豆3","yellow"], [25,"#d7797f","南瓜号4","rgba(222,222,222,.9)"] ]; goChart(chartData); </script> </body> </html>
本文地址：http://www.cnblogs.com/surfaces/
百度echarts扇形图每个区块增加点击事件的更多相关文章
- ISO给UIImageView增加点击事件
自己做了一个九宫格,里面的图标都是由多张图片重叠构成,然后包装成一个button来使用: 遇到的问题是如何给这个“button”增加点击事件? 解决思路1:网友提示在该“button”上增加一个真正的 ...
- echart自定义浮窗 增加点击事件
一:情景 做一个柱状图,需要在柱状图显示lable,并且浮窗上每个条目可以被点击或者跳转. 我使用的做图插件是echarts,但是echart的浮窗是图片,而且不可以被点击,不能识别html,而且这个 ...
- Extjs grid column里添加button等html标签，并增加点击事件
Extjs里有个actioncolumn,但actioncolumn只能添加一系列button,不能既有字又有button 如何能在column里增加html标签,并给button添加事件呢? 1. ...
- 在循环中如何取input的值和增加点击事件
{volist name="dianpu" id="dianpu"} <input style="border: none;" rea ...
- 百度地图 Infowidow 内容(content 下标签) 点击事件
需要监听 infowindow 的打开事件 ,查看InfoWindow API 实现 html 点击效果 代码 var infoWindow = that.createDangerInfoWindo ...
- 使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图 简单举例说明下echarts如何绘制条形图和扇形图 代码示例 <!doctype html> <html lang="en" ...
- 网页图表类框架（插件）——百度eCharts和Highcharts
ECharts, 缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库, 可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10 ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- echarts雷达图点击事件
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
随机推荐
- JDK8在Java转让Javascript脚本引擎动态地定义和运行代码
import java.lang.*; import java.util.Arrays; import java.util.List; import javax.script.Invocable; i ...
- windows phone (24) Canvas元素A
原文:windows phone (24) Canvas元素A Canvas元素表示定制一个区域,并可以通过相对坐标定义子元素位置,在一下情况下Canvas是不可见的 Height 属性等于 0. W ...
- Oracle SQL Lesson (6) - 使用Join进行联合查询
使用连接SQL 1999SELECT table1.column, table2.columnFROM table1[NATURAL JOIN table2] |[JOIN table2 USING ...
- sizeClass和autolayout学习资源整理
sizeClass和autolayout,看来不得不開始放弃frame的写法,收集点资料集中学习下 Adaptivity User Interfaces苹果官方文档:https://developer ...
- Xamarin.Android 入门实例（4）之实现对 SQLLite 进行添加/修改/删除/查询操作
1.Main.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...
- CSDN-markdown编者LaTex数学公式
LaTex什么? LaTeX(LATEX.音译"拉太和")它是基于ΤΕΧ排版系统,莱斯利由美国计算机科学家·兰伯特(Leslie Lamport)于20纪80年代初期开发,利用这样 ...
- SpringMVC+Spring+Hibernate的小样例
Strusts2+Spring+Hibernate尽管是主流的WEB开发框架,可是SpringMVC有越来越多的人使用了.确实也很好用.用得爽! 这里实现了一个SpringMVC+Spring+Hib ...
- POJ 1915-Knight Moves (单向BFS && 双向BFS 比)
主题链接:Knight Moves 题意:8个方向的 马跳式走法 ,已知起点 和终点,求最短路 研究了一下双向BFS,不是非常难,和普通的BFS一样.双向BFS只是是从 起点和终点同一时候開始搜索,可 ...
- JAVA编程思想(2) - 操作符(一)
"在最底层,Java中的数据是通过操作符来操作的." 1. 使用Java操作符 -操作符接受一个或者多个參数,并生成一个新值,參数的形式与普通的方法调用不用,但效果是同样的.加号和 ...
- 单链表的实现---SingleLinkedList
单链表的实现,定义为SingleLinkedList class Node<AnyType>{ //结点Node类 public AnyType data; public Node< ...