怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 303 JQUERY DREAMWEAVER
如何获取echarts点击点的X轴和Y轴值
来源：互联网
2023-03-17 00:52:05 433
在做项目的过程中，我要用到echarts图形，并且要获取点击折线点的值。之前一直都在用FusionCharts，没有用到echarts，现在要用到得学习下，了解它的属性和事件。以下是怎么获取折线图中点的X轴值和Y轴值，具体步骤如下：
工具/原料
- echarts相关的核心js和css
- MyEclipse10
- JDK1.7
- Tomcat7.0.x
- 截图工具
方法/步骤
首先，在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>
如下图所示：
由于这里要用到折线图，需要将折线图的JS引入
require(
[
'echarts',
'echarts/chart/line'
],
如下图所示：
图形要在页面上显示，需要一个容器，这里在body里定义一个div
body>
div id="lineChart" style="width: 100%;height:100%;font-family: 微软雅黑;font-size: 12px;">/div>
/body>
如下图所示：
现在，编写形成折线图的核心js
function (ec) {
var line = ec.init(document.getElementById('lineChart'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"苹果销售量",
"type":"line",
"data":[8956, 2025, 3640, 5610, 8910, 5720, 3467, 9023, 8367, 5342, 6754, 8753]
}
]
};
line.setOption(option);
}
如下图所示：
启动Tomcat服务器，在浏览器上运行JSP页面，会看到一个折线图
如下图所示：
点击折线上的折点，会获取到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);
}
由于在js利用console打印，可以在火狐浏览器上查看相应的参数指标，具体如下图所示：
在函数中添加alert，将参数指标打印在页面上
var str = "seriesIndex:" seriesIndex "****" "dataIndex:" dataIndex "****" "seriesName:" seriesName "****"
"name:" name "****" "data:" data "****" "value:" value;
alert(str);
如下图所示：
再次刷新浏览器，等折线出来后，点击上面的点
如下图所示：
注意事项
- seriesIndex：系列序号，dataIndex：数值序列，seriesName：legend名称，name：X轴值，data和value都代表Y轴值
- 了解和熟悉echarts的属性和事件
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JQUERYJAVASCRIPT
上一篇：js如何实现点击文字向下展示介绍的效果 下一篇：ajax如何判断最大值
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 290 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 334 JQUERY