牛骨文教育服务平台(让学习变的简单)
博文笔记

ehcarts之图标添加点击事件

创建时间:2015-02-26 投稿人: 浏览次数:2146

应需求要个一个图标添加点击事件(如有一个条形图,点击某个图形能够获取该图形的数据或者改变图标之类的功能)

借用echarts自带的例子实验

图表部分js代码:

 var myChart = echarts.init(document.getElementById("main"));
	//绑定事件
	myChart.on("click", function (param) {
       		alert(param.dataIndex)
				
    	})
	var option={
            tooltip : {
                trigger: "axis"
            },
            legend: {
                data:["蒸发量","降水量"]
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ["line", "bar"]},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : "category",
                    data : ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
                }
            ],
            yAxis : [
                {
                    type : "value",
                    splitArea : {show : true}
                }
            ],
            series : [
                {
                    name:"蒸发量",
                    type:"bar",
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name:"降水量",
                    type:"bar",
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                }
            ]
        };
        myChart.setOption(option);

ok,完成echarts图表点击事件添加。
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。