myChart.on('click', function (params) {
当componentType == "xAxis"或者 ==“yAxisx”时,取被点击时坐标轴的值params.value
alert("单击了"+params.componentType+"x轴标签"+params.value);
if(params.componentType == "xAxis"){
alert("单击了"+params.value+"x轴标签");
}else if (params.componentType == "yAxis") {
alert("单击了"+params.value+"y轴标签");
}
else{ // 最核心的部分
alert("单击了"+params.name+"柱状图"+params.value);
}
// invalid start
// 获取data长度
// alert(option.series[0].data.length);
// 获取地N个data的值
// alert(option.series[0].data[3]);
// 获取series中param.dataIndex事件对应的值
// alert(params.dataIndex);
// alert(option.series[params.seriesIndex].data[params.dataIndex]);
//invalid end
// alert(param.value);
// 获取xAxis当前点击事件索引对应的值,可以用作传参
// alert("test "+option.xAxis.data[params.dataIndex]);
//param.dataIndex 获取当前点击索引,
// alert(param.dataIndex);
// 当前点击事件位于series中的索引
// alert(param.seriesIndex);
//param具体包含的参数见 https://blog.csdn.net/allenjay11/article/details/76033232
updatePage(option.xAxis.data[params.dataIndex],params.value);
refresh();
});
</script>
<script type="text/javascript">
function updatePage(tag, value){
var xAxisTag = $("#xAxisTag");
xAxisTag.html(tag);
var barValue = $("#barValue");
barValue.html(value);
};
function refresh(){
// 刷新页面
// location.reload();
//window.location.reload();
//局部刷新main内容
//此处没有用常用的刷新div等方法,而是直接改变了option的值,然后重新赋值给myChart
console.log("refresh");
option.title.text='入门';
// option.series.data[0] = Math.floor(Math.random()*50+1);
// option.series.data[1] = Math.floor(Math.random()*50+1);
// option.series.data[2] = Math.floor(Math.random()*50+1);
// option.series.data[3] = Math.floor(Math.random()*50+1);
// option.series.data[4] = Math.floor(Math.random()*50+1);
// option.series.data[5] = Math.floor(Math.random()*50+1);
//console.log(option.series.data[0]);
//var v1 = Math.floor(Math.random()*50+1);
//option.series.data[0] = v1;
//简化方法,调用getSeriesData更新数据。
option.series.data = getSeriesData();
myChart.setOption(option);
};
</script>
</html>