var option={
timeline:{
data:['2013-01-01','2014-01-01','2015-01-01'],
label : {
formatter : function(s) {
return sslice(0, 4);
}
},
autoPlay : true,
playInterval : 1000
},
options:[
{
/options 1 /
title : {text: '2013'},
首先，在Java Web项目中新建一个JSP页面someChartjsp，引入echarts核心JS
<script type="text/javascript" src="<%=basePath%>/scripts/echarts/build/dist/echartsjs"></script>
<script type="text/javascript">
// 路径配置
requireconfig({
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 = ecinit(documentgetElementById('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]
}
]
};
linesetOption(option);
}
启动Tomcat服务器，在浏览器上运行JSP页面，会看到一个折线图
点击折线上的折点，会获取到X轴和Y轴值，说明这个需要给图一个点击事件，具体代码如下：
function queryXY(param)
{
var seriesIndex = paramseriesIndex;
var dataIndex = paramdataIndex;
var seriesName = paramseriesName;
var name = paramname;
var data = paramdata;
var value = paramvalue;
consoledir(param);
}
由于在js利用console打印，可以在火狐浏览器上查看相应的参数指标，
在函数中添加alert，将参数指标打印在页面上
var str = "seriesIndex:"+seriesIndex+""+"dataIndex:"+dataIndex+""+"seriesName:"+seriesName+""+
"name:"+name+""+"data:"+data+""+"value:"+value;
alert(str);
再次刷新浏览器，等折线出来后，点击上面的点
多条折线的时候，每条折线单独自定义了一些样式，删除自定义配置的时候，不需要把自定义的配置一个一个初始化掉，因为有的我也不知道echarts内置的初始值是什么，那么初始化的时候有哪些属性，就用什么属性，用个新的obj覆盖，不要一个一个去修改。
改完option然后通过setOption去让图重新渲染，发现图没更新，需要再加个参数true。
echarts百度的骄傲，当然也是中国的骄傲。使用中，还是有些费解的地方，毕竟是个复杂的图表，在此罗列一些：
这个线按道理，是在option配置对象，属性xAxis、yAxis中设置，本以为是这样设置的：
结果不是。一番寻思，才发现在option配置对象，属性grid中设置的：
本以为是设置option配置对象属性backgroundColor，结果不是，还是设置grid中属性backgroundColor：
itemStyle中的属性color，对于折线图来说，是设置线上面的小圆点（标志图形类型），真正设置内容填充色，要这么设置：
不单单是在option配置对象，属性xAxis、yAxis中设置两个对象就可以，还要在series中做好呼应，设置响应的xAxisIndex、yAxisIndex，才会出来两根轴：
可能大家第一时间，以为是option配置对象，属性color配置原因，还要在series中做好呼应，设置上name：
原因是不能设置barWidth，可以改用barMaxWidth或者barCategoryGap，来代替
想要鼠标经过，变成一根直线的提示，不单单要设置axisPointer，还需要对应设置trigger为axis：
打开控制台，查看tooltip提示框，不是canvas绘制出来的，是一个div元素class="echarts-tooltip zr-element"；可能是页面中css样式设置，影响到了。
一个网页中可以创建多个 echarts 实例。
每个 echarts 实例中可以创建多个图表和坐标系等等（用 option 来描述）。
准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。
在 echarts 里， 系列 （series）是指：一组数值以及他们映射成的图。
一个 系列 包含的要素至少有：一组数值、图表类型（seriestype）、以及其他的关于这些数据如何映射成图的参数。
说人话就是， 系列 这个东西就是 用来描述图表的 ，包含了图表的数据、图表是什么类型：line（折线图）、bar（柱状图）、pie（饼图） 、以及其它的构成参数。
也可以有另一种配置方式，系列的数据从 dataset 中取：
在系列之上，echarts 中各种内容，被抽象为“组件”。
例如，echarts 中至少有这些组件： xAxis （直角坐标系 X 轴）、 yAxis （直角坐标系 Y 轴）、 grid （直角坐标系底板）、 angleAxis （极坐标系角度轴）、 radiusAxis （极坐标系半径轴）、 polar （极坐标系底板）、 geo （地理坐标系）、 dataZoom （数据区缩放组件）、 visualMap （视觉映射组件）、 tooltip （提示框组件）、 toolbox （工具栏组件）、 series （系列）、
我们注意到，其实 系列 （series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。
如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。
echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能 *** 作什么事情等等。简而言之， option 描述了： 数据 、 数据如何映射成图形 、 交互行为 。
系列里的 seriesdata 是本系列的数据。也可以使用另一种方式，系列数据从 dataset 中取：
多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。
这种绝对定位的方式，类似于 CSS 的绝对定位（ position: absolute ）。绝对定位基于的是 echarts 容器 DOM 节点。
它们的值可以是
如下图的例子，对 grid 组件（也就是直角坐标系的底板）设置 left、right、height、bottom 达到的效果。
我们可以注意到， left right width 是一组（横向）、 top bottom height 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了 left 和 right 就可以了， width 会被自动算出。
坐标系用于布局，以及显示数据的刻度等等。一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis （直角坐标系 X 轴）、 yAxis （直角坐标系 Y 轴）、 grid （直角坐标系底板）三种组件。 xAxis 、 yAxis 被 grid 自动引用并组织起来，共同工作。
下图，只声明了 xAxis 、 yAxis 和一个 scatter （散点图系列），echarts 暗自为他们创建了 grid 并关联起他们：
再来看两个 yAxis ，共享了一个 xAxis 的例子。两个 series ，也共享了这个 xAxis ，但是分别使用不同的 yAxis ，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis ：
还存在一个 echarts 实例中，有多个 grid 的情况，每个 grid 分别有 xAxis 、 yAxis ，他们使用 xAxisIndex 、 yAxisIndex 、 gridIndex 来指定引用关系：
另外，一个系列，往往能运行在不同的坐标系中。例如，一个 scatter （散点图）能运行在 直角坐标系、极坐标系 、地理坐标系（GEO） 等各种坐标系中。同样，一个坐标系，也能承载不同的系列，如上面出现的各种例子，直角坐标系里承载了 line （折线图）、 bar （柱状图）等等。
tooltip formatter 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
1 字符串模板
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
formatter:'{b0}: {c0}<br />{b1}: {c1}'
2 回调函数
回调函数格式：
(params:Object|Array,ticket: string,callback:(ticket: string, html: string)) =>string | HTMLElement | HTMLElement[]
支持返回 HTML 字符串或者创建的 DOM 实例。
第一个参数 params 是 formatter 需要的数据集。格式如下：
{
componentType:'series',
// 系列类型
seriesType: string,
// 系列在传入的 optionseries 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data:Object,
// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
value: number|Array|Object,
// 坐标轴 encode 映射信息，
// key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
// value 必然为数组，不会为 null/undefied，表示 dimension index 。
// 其内容如：
// {
// x: [2] // dimension index 为 2 的数据映射到 x 轴
// y: [0]
// dimension index 为 0 的数据映射到 y 轴
// }
encode:Object,
// 维度名列表
dimensionNames:Array,
// 数据的维度
index，如 0 或 1 或 2
// 仅在雷达图中使用。
dimensionIndex: number,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
}
详情见 (echarts------tool--formatter)
在控制层中，可以通过以下两种方法获取视图层select标签选中的值：
通过表单提交获取：
在前端页面中，将选中的值作为表单的一个参数，通过form表单提交到后台控制层。在后台控制层中，通过requestgetParameter()方法获取表单参数的值。
示例代码如下：
HTML代码：
```
<form action="testController" method="post">
<select name="selectValue">
<option value="value1">选项1</option>
<option value="value2">选项2</option>
<option value="value3">选项3</option>
</select>
<input type="submit" value="提交"/>
</form>
```
控制层Java代码：
```
@RequestMapping("/testController")
public ModelAndView testController(>
String selectValue = requestgetParameter("selectValue");
// do something with selectValue
return new ModelAndView("viewName");
}
```
2 通过AJAX请求获取：
使用ajax请求，在前端页面中获取select标签选中的值，并通过ajax发送到后台控制层。在后台控制层中，通过@RequestParam注解获取ajax请求中的参数值。
示例代码如下：
HTML代码：
```
<select id="selectValue">
<option value="value1">选项1</option>
<option value="value2">选项2</option>
<option value="value3">选项3</option>
</select>
<button onclick="getValue()">获取选中值</button>
<script>
function getValue() {
var selectValue = documentgetElementById("selectValue")value;
$ajax({
type: "POST",
url: "testController",
data: {"selectValue": selectValue},
success:function(data){
// do something with data
}
});
}
</script>
```
控制层Java代码：
```
@RequestMapping("/testController")
public ModelAndView testController(@RequestParam String selectValue) {
// do something with selectValue
return new ModelAndView("viewName");
}
```
以上就是关于如何获取echarts时间组件timeline.currentindex的值全部的内容，包括:如何获取echarts时间组件timeline.currentindex的值、echarts如何获取legend data传给series的name、修改echarts的option配置后，图不能刷新等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）