【資料視覺化】echarts繪製帶有點選事件的圖表
阿新 • • 發佈:2019-02-18
<script type="text/javascript"> //基於準備好的dom,初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); //指定圖表的配置項和資料 var option = { title:{ text:'主頁地圖展示' }, tooltip:{}, legend:{ data:['銷量'] }, xAxis:{ data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis:{ }, series:[{ name:'銷量', type:'bar', data:[5,20,36,10,10,20] }] }; //使用剛指定的配置項和資料顯示圖表 myChart.setOption(option); myChart.on('click', function(params){ // 點選柱狀圖不同位置開啟相應的百度搜索頁面 //window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); //點選柱狀圖不同位置跳轉到不同頁面 var name=params.name; if(name=="襯衫"){ window.location.href="temperature"; }else if(name=="羊毛衫"){ window.location.href="air_quality"; } myChart.on('click',eConsole); }); </script>
以上程式碼試驗了點選柱狀圖的不同位置,可以跳轉到不同頁面,或開啟新頁面。