怎么改变echarts中option的center值

该方法返回的keyword指向了前台负责图表显示的jsp页面

public String keyword() {

if(this.dateNum == null || this.dateNum.equals("")) {

this.dateNum = "5"

}

return "keyword"

}

该方法根据jsp的ajax传回来显示的条数dateNum进行数据库取值（这地方我没有使用实时拿值，而是通过定时来把数据更新进一张表，从而图表拿值会非常迅速）

可以看出我定义了一个Option对象，里面的参数都可以在里面以方法或者属性的方式调用。最后封装好Option后，把他放入jsonObject对象传回前台一接收json值即可。

public String getKeyWordData() throws ParseException{

LoginUser user = (LoginUser) ((SecurityContext) ServletActionContext

.getRequest().getSession()

.getAttribute("SPRING_SECURITY_CONTEXT")).getAuthentication()

.getPrincipal()

Long id = user.getId()

int num = Integer.parseInt(this.dateNum)

jsonObj = new JSONObject()

//取到该用户的所有关键字放入legendName数组

List<String>names = this.cacheCountManager.getKeywordNames(id)

String[] legendName = new String[names.size()]

for(int i=0i<names.size()i++) {

String name = names.get(i)

legendName[i] = name

}

String[] riqiArr = new String[num]

for(int j=numj>0j--) {

String riqi = getStrDate(String.valueOf(j))

riqiArr[num-j] = riqi

}

Option option=new GsonOption()

option.title().text("关键词文章统计")

option.tooltip().trigger(Trigger.axis)

option.legend().data(legendName)

ValueAxis axis = new ValueAxis()

axis.type(AxisType.category).boundaryGap(false).data(riqiArr)

option.xAxis(axis)

CategoryAxis yaxis = new CategoryAxis()

yaxis.type(AxisType.value)

option.yAxis(yaxis)

List<Series>seriess = new ArrayList<Series>()

MarkPoint mp = new MarkPoint()

mp.data(new Data().type(MarkType.max).name("最大值"),

new Data().type(MarkType.min).name("最小值"))

for(int i=0i<names.size()i++) {

Integer[] countArr = new Integer[num]

Line line = new Line()

String name = names.get(i)

for(int j=numj>0j--) {

String riqi = getStrDate(String.valueOf(j))

countArr[num-j] = this.cacheCountManager.getCount(id, riqi, name)

}

line.name(name).type(SeriesType.line).data(countArr).markPoint(mp)

seriess.add(line)

}

option.series(seriess)

jsonObj=JSONObject.fromObject(option.toString())

return "echartsJson"

}

页面显示部分很简洁。

<div id="main" style="height: 400pxborder: 1px solid #cccpadding: 10px">图形正在加载中...</div>

$(function(){

require([ 'echarts','echarts/chart/line' ],DrawEChart)

})

function DrawEChart(ec) {

var myChart

myChart = ec.init(document.getElementById('main'))

myChart.showLoading({

<span style="white-space:pre"> </span>text: "图表数据正在努力加载...",

})

var date = $("#dateNum").val()

$.ajax({

<span style="white-space:pre"> </span>type : "post",

<span style="white-space:pre"> </span>data:{"dateNum":date},

url : "${ctx}/statistics/statistics!getKeyWordData.action",

dataType : "json",

success : function(data) {

myChart.setOption(data.jsonObj)

<span style="white-space:pre"> </span>myChart.hideLoading()

},

error : function(errorMsg) {

<span style="white-space:pre"> </span>alert("不好意思大爷，图表请求数据失败啦！")

}

})

}

多条折线的时候，每条折线单独自定义了一些样式，删除自定义配置的时候，不需要把自定义的配置一个一个初始化掉，因为有的我也不知道echarts内置的初始值是什么，那么初始化的时候有哪些属性，就用什么属性，用个新的obj覆盖，不要一个一个去修改。

改完option然后通过setOption去让图重新渲染，发现图没更新，需要再加个参数true。

---