百度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 餅狀圖
效果以下javascript
代碼以下 html
<!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/
相關文章
- 1. eCharts增長圖例（legend）的點擊事件--echarts-for-react
- 2. echarts 圖點擊事件
- 3. echarts 點擊事件
- 4. 百度Echarts餅圖,點擊各個選項的點擊事件,以及顯示百分比的文字
- 5. Android 百度地圖 多個marker點以及點擊事件
- 6. echarts設置圖標圖例legend爲圓，長方形，扇形等
- 7. ISO給UIImageView增長點擊事件
- 8. echarts 圖表添加點擊事件
- 9. echarts重寫圖例點擊事件
- 10. Echarts柱狀圖添加點擊事件
- 更多相關文章...
- • Markdown 區塊 - Markdown 教程
- • R 繪圖 - 條形圖 - R 語言教程
- • RxJava操作符（一）Creating Observables
- • 算法總結-廣度優先算法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
