百度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 ...
随机推荐
- Lucene 实例教程(四)之检索方法总结
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本人声明.否则将追究法律责任. 作者: 永恒の_☆ 地址: http://blog.csdn.net/chenghui031 ...
- Android Application plugin
在网易云阅读App上看到了插件管理功能,刚好自己也需要以插件的模式来扩展已有的功能,于是研究了一下,下面是一张网易云阅读App提供的插件模式,只需下载相应的插件就扩展了相应的功能,非常方便 ...
- Phpcms所有系统变量列表 Phpcms V9 文件目录结构
Phpcms所有系统变量列表 用户变量: view plaincopy to clipboardprint? $_userid 用户id $_username 用户名 $_areaid ...
- 《炉石传说》建筑设计欣赏(7)：采用Google.ProtocolBuffers处理网络消息
这一次,琢磨了一下Unity3D网络游戏发展的网络信息处理.服务器的网络游戏一般都是自主研发,因此,相应的网络消息处理应该培养自己.client/现在使用的邮件服务器之间的价差JSON和Google. ...
- Angularjs 基于karma和jasmine的单元测试
目录: 1. 单元测试的配置 2. 实例文件目录解释 3. 测试controller 3.1 测试controller中变量值是否正确 3.2 模拟http请求返回值,测试$http服 ...
- 我理解设计模式C++实现观察者模式Observer Pattern
概述: 近期中国股市起起伏伏,当然了起伏就用商机,小明发现商机后果断想入市,买入了中国证券,他想在电脑client上,网页上,手机上,iPad上都能够查看到该证券的实时行情,这样的情况下我们应该怎么设 ...
- atitit..主流 浏览器 js 发动机 内核 市场份额 attialx总结vOa9
atitit..主流 浏览器 js 发动机 内核 市场份额 attialx总结vOa9 1. 浏览器内核 1 2. 浏览器的主要组件包含: 2 2.1. 主要组件体系结构 2 2.2. WebCor ...
- google在线测试练习2
Problem Given a list of space separated words, reverse the order of the words. Each line of text con ...
- hibernate的通配符比拼接sql到底好在哪?
Hibernate对于刚接触的人来说,通配符只是提供了另一种组合sql的方式.接触的久了,熟悉之后,才能够真正理解通配符在Hibernate中起到的作用 主要作用有两点: 1,避免sql注入 hibe ...
- MongoDB：逐渐变得无关紧要
我与MongoDB的关系可分为三个阶段.对于目前处于第三阶段的我来说,这款产品似乎变得无关紧要了.很快你就会明白为什么我这么说. 阶段一:痴迷 我与MongoDB的第一次接触十分神奇:一个poligl ...