在做项目的过程中，我要用到echarts图形，并且要获取点击折线点的值。之前一直都在用FusionCharts，没有用到echarts，现在要用到得学习下，了解它的属性和事件。以下是怎么获取折线图中点的X轴值和Y轴值，具体步骤如下：工具/原料moreecharts相关的核心js和cssMyEclipse10JDK1.7Tomcat7.0.x截图工具方法/步骤1/9分步阅读

首先，在Java Web项目中新建一个JSP页面someChart.jsp，引入echarts核心JS

script type=text/javascript src=%=basePath%/scripts/echarts/build/dist/echarts.js/script

script type=text/javascript

// 路径配置

require.config({

paths: {

echarts: %=basePath%/scripts/echarts/build/dist

}

});

/script

如下图所示：

2/9

由于这里要用到折线图，需要将折线图的JS引入

require(

,

如下图所示：

3/9

图形要在页面上显示，需要一个容器，这里在body里定义一个div

body

div id=lineChart style=width: 100%;height:100%;font-family: 微软雅黑;font-size: 12px;/div

/body

如下图所示：

4/9

现在，编写形成折线图的核心js

function (ec) {

var line = ec.init(document.getElementById(lineChart));

var option = {

tooltip: {

show: true

},

legend: {

data:

},

xAxis :

}

],

yAxis : ,

series :

}

]

};

line.setOption(option);

}

如下图所示：

5/9

启动Tomcat服务器，在浏览器上运行JSP页面，会看到一个折线图

如下图所示：

6/9

点击折线上的折点，会获取到X轴和Y轴值，说明这个需要给图一个点击事件，具体代码如下：

function queryXY(param)

{

var seriesIndex = param.seriesIndex;

var dataIndex = param.dataIndex;

var seriesName = param.seriesName;

var name = param.name;

var data = param.data;

var value = param.value;

console.dir(param);

}

7/9

由于在js利用console打印，可以在火狐浏览器上查看相应的参数指标，具体如下图所示：

8/9

在函数中添加alert，将参数指标打印在页面上

var str = seriesIndex:+seriesIndex+****+dataIndex:+dataIndex+****+seriesName:+seriesName+****+

name:+name+****+data:+data+****+value:+value;

alert(str);

如下图所示：

9/9

再次刷新浏览器，等折线出来后，点击上面的点

如下图所示：

注意事项

seriesIndex：系列序号，dataIndex：数值序列，seriesName：legend名称，name：X轴值，data和value都代表Y轴值

了解和熟悉echarts的属性和事件

ECHARTSXY轴值JQUERYCSS3JAVASCRIPT