ECharts 報表事件聯動系列三：柱狀圖，餅狀圖實現聯動
阿新 • • 發佈：2018-05-19
餅狀圖 img and int js函數 radius func get 執行
源碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ECharts</title> <script src="http://echarts.baidu.com/dist/echarts.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom--> <div id="bar" style="width: 600px;height:400px;"></div> <div id="pie" style="width: 600px;height:400px;"></div> </body> <script type="text/javascript"> // 基於準備好的dom，初始化echarts實例 var myBarChart = echarts.init(document.getElementById(‘bar‘)); var n1 = Math.floor(Math.random()*500+1); var n2 = Math.floor(Math.random()*500+1); var n3 = Math.floor(Math.random()*500+1); var n4 = Math.floor(Math.random()*500+1); var n5 = Math.floor(Math.random()*500+1); var n6 = Math.floor(Math.random()*500+1);// 指定圖表的配置項和數據 var option = { title: { text: ‘ECharts 入門示例‘ }, tooltip: { triggerEvent:true}, legend: { data:[‘銷量‘,"趨勢"] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"], triggerEvent:true, //可以點擊x軸坐標, axisTick: { alignWithLabel: true //坐標值是否在刻度中間 } }, yAxis: { type: ‘value‘, splitArea: { show: true }, //百分比顯示Y軸 axisLabel: { show: true, interval: ‘auto‘ }, show: true, triggerEvent:true //可以點擊y軸坐標 }, series: [{ name: ‘銷量‘, type: ‘bar‘, data: [n1, n2, n3, n4, n5, n6], itemStyle: { normal: { label: { show: true, position: ‘top‘ } } } },{ name: ‘趨勢‘, type: ‘line‘, data: [n1, n2, n3, n4, n5, n6], smooth:false, //是否為曲線,默認為false itemStyle:{ normal:{ lineStyle:{ width:1, // 虛線的寬度 type:‘dotted‘ //‘dotted‘虛線 ‘solid‘實線 } } } }] }; // 使用剛指定的配置項和數據顯示圖表。 myBarChart.setOption(option); //方法1：https://zhuanlan.zhihu.com/p/33050579 // var ids = [55,66,85,86,55,544,5,6,8,4,88,89]; //這樣就可以獲取到點擊柱子或者文本標簽對應的id了 // myBarChart.on(‘click‘, function (params) { // if(params.componentType =="xAxis"){ // alert("單擊了"+params.value+"x軸標簽, 你點擊的是第"+(Number(params.event.target.anid.split("_")[1])+1)+"個X標簽；當前對應的id為："+ids[params.event.target.anid.split("_")[1]]); // }else{ // alert("單擊了"+params.name+"柱狀圖, 你點擊的是第"+(params.dataIndex+1)+"個柱狀圖；當前對應的id為："+ids[params.dataIndex]); //數組下標是從0開始的哦，圖也是從0開始的 // } // }); //方法二：https://blog.csdn.net/sophia_xiaoma/article/details/78055947 myBarChart.on(‘click‘, function (params) { // 當componentType == "xAxis"或者 ==“yAxisx”時，取被點擊時坐標軸的值params.value alert("單擊了"+params.componentType+"x軸標簽"+params.value); if(params.componentType == "xAxis"){ alert("單擊了"+params.value+"x軸標簽"+params.name); }else{ alert("單擊了"+params.name+"柱狀圖"+params.value); } }); //方法三：http://www.jb51.net/article/125820.htm // myBarChart.on("click", barConsole); // function barConsole(param) { // // 獲取data長度 // // alert(option.series[0].data.length); // // 獲取地N個data的值 // alert(option.series[0].data[i]); // // 獲取series中param.dataIndex事件對應的值 // // alert(option.series[param.seriesIndex].data[param.dataIndex]); // // alert(param.value); //與上一行等價 // // 獲取xAxis當前點擊事件索引對應的值，可以用作傳參了 // // alert(option.xAxis.data[param.dataIndex]); // //param.dataIndex 獲取當前點擊索引， // // alert(param.dataIndex); // // 當前點擊事件位於series中的索引 // // alert(param.seriesIndex); // // clickFunc(param.dataIndex);//執行點擊效果 // //param具體包含的參數見 https://blog.csdn.net/allenjay11/article/details/76033232 // //刷新頁面 // // location.reload(); // // window.location.reload(); // refresh(); // } //方法四：餅圖添加事件示例 https://www.cnblogs.com/zhzhair-coding/p/6953982.html?utm_source=itdadao&utm_medium=referral </script> <script type="text/javascript"> // 基於準備好的dom，初始化echarts實例 var myPieChart = echarts.init(document.getElementById(‘pie‘)); var n1 = Math.floor(Math.random()*500+1); var n2 = Math.floor(Math.random()*500+1); var n3 = Math.floor(Math.random()*500+1); var n4 = Math.floor(Math.random()*500+1); var n5 = Math.floor(Math.random()*500+1); // 指定圖表的配置項和數據 var option = { "legend":{ "orient":"vertical", "left":"left" }, "series":[ { "data":[ { "name":"直接訪問", "value":n1 }, { "name":"郵件營銷", "value":n2 }, { "name":"聯盟廣告", "value":n3 }, { "name":"視頻廣告", "value":n4 }, { "name":"搜索引擎", "value":n5 } ], "center":[ "50%", "60%" ], "name":"訪問來源", "itemStyle":{ "normal":{ "label":{ "formatter":"{b}\n{c}\n{d}%", "show":true } }, "emphasis":{ "shadowOffsetX":0, "shadowBlur":10, "shadowColor":"rgba(0, 0, 0, 0.5)" } }, "radius":"55%", "type":"pie" } ], "tooltip":{ "formatter":"{a} <br/>{b} : {c} ({d}%)", "trigger":"item" }, "title":{ "subtext":"純屬虛構", "x":"center", "text":"某站點用戶訪問來源" } }; // 使用剛指定的配置項和數據顯示圖表。 myPieChart.setOption(option); myPieChart.on("click", pieConsole); //方法三：http://www.jb51.net/article/125820.htm function pieConsole(param) { // 獲取data長度 alert(option.series[0].data.length); // 獲取地N個data的值 // alert(option.series[0].data[i]); // 獲取series中param.dataIndex事件對應的值 alert(param.value); alert(param.name); alert(option.series[param.seriesIndex].data[param.dataIndex].value); alert(option.series[param.seriesIndex].data[param.dataIndex].name); // clickFunc(param.dataIndex);//執行點擊效果,觸發相應js函數 //param具體包含的方法見 https://blog.csdn.net/allenjay11/article/details/76033232 //刷新頁面 // location.reload(); // window.location.reload(); } </script> <!--每5秒自動刷新頁面--> <script type="text/javascript"> function refresh(){ // 刷新頁面 // location.reload(); window.location.reload(); }; // setInterval(refresh, 5000);//5秒鐘執行一次 </script> </html>
顯示效果如下：
ECharts 報表事件聯動系列三：柱狀圖，餅狀圖實現聯動