echarts對每個data[i]的圖片添加點擊事件

本文轉載自查看原文 2017-06-06 22:25 9817 javascript

1.綜述：以餅圖為例，只需要對echarts對象option添加以下幾行代碼即可

//添加點擊事件（單擊），還有其他鼠標事件和鍵盤事件等等
myChart1.on("click", function (param){
alert(param.dataIndex+':'+option1.series[0].data[param.dataIndex].name);
});

2.效果圖

3.目錄結構

4.<head></head>和<body></body>的內容

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="echarts/echarts.js" type="text/javascript"></script>

<div id="myChart1" style="height: 400px"></div>

5.JavaScript部分

<script type="text/javascript">
window.onload=function(){
    //配置echarts的路徑
    require.config({
        packages: [{
               name: 'echarts',
               location: 'echarts',
               main: 'echarts'
           }]
     });
    //樣例數據，可以是后端傳過來的json字符串
    var arr1 = new Array(100,130,76,150);    
    require(['echarts','echarts/chart/pie'],
        function drawPie(ec){
            myChart1 = ec.init(document.getElementById('myChart1')); 
            var option1 = {
                title : {
                     text: '上個月每周的學習時間分布',
                      //subtext: '餅圖（Pie Chart）',
                      x:'center'
                },
                tooltip : {
                  trigger: 'item',
                  //trigger: 'axis',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                  orient : 'vertical',
                  x : 'left',
                  y : 'center',
                  data:['第一周'+arr1[0]+'學時',
                        '第二周'+arr1[1]+'學時',
                        '第三周'+arr1[2]+'學時',
                        '第四周'+arr1[3]+'學時'
                        ]
                },
                toolbox: {
                  show : true,
                  feature : {
                    //mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                  }
                }, 
                calculable : true,
                series : [
                  {
                      //name:'餅圖實例-------------------------------',-------------',
                    type:'pie',
                    radius : '75%',
                    center: ['50%', '60%'],
                    data:[
                        {value:arr1[0], name:'第一周'+arr1[0]+'學時'},
                        {value:arr1[1], name:'第二周'+arr1[1]+'學時'},
                        {value:arr1[2], name:'第三周'+arr1[2]+'學時'},
                        {value:arr1[3], name:'第四周'+arr1[3]+'學時'}
                          ]
                  }
                ]
              };
            
            // 為echarts對象加載數據 
            myChart1.setOption(option1);
            //添加點擊事件（單擊），還有其他鼠標事件和鍵盤事件等等
            myChart1.on("click", function (param){               
                alert(param.dataIndex+':'+option1.series[0].data[param.dataIndex].name);
            });
    });
    
}
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts添加點擊事件 Echarts 地圖添加點擊事件 ECharts 給X軸文字添加點擊事件 vue項目在echarts tooltip中添加點擊事件 echarts餅圖扇區添加點擊事件百度echarts扇形圖每個區塊增加點擊事件給label添加點擊事件給UIImageView添加點擊事件安卓 surfaceview 添加點擊事件 iOS-給UIView添加點擊事件