如何设置echarts option参数

Posted 2023-05-10

参考技术A 该方法返回的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=0;i<names.size();i++)
String name = names.get(i) ;
legendName[i] = name ;

String[] riqiArr = new String[num] ;
for(int j=num;j>0;j--)
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=0;i<names.size();i++)
Integer[] countArr = new Integer[num] ;
Line line = new Line() ;
String name = names.get(i) ;
for(int j=num;j>0;j--)
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: 400px; border: 1px solid #ccc; padding: 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知识梳理

参考技术A

1. 标题
option.title

2. 工具栏
option.toolbox

1. 饼图
其余步骤一样，不同在于 options.series

3. 地图

option.geo 和地图相关的数据
option.series 格式化处理好的数据
3. 散点图
options.series.type = \'scatter\'
4. K线图
options.series.type = \'candlestick\'
5.雷达图
options.series.type = \'radar\'

1.多个坐标系配合 -- 举例，多个y轴

设置两个y轴，配置多个yaxis属性

2.dataZoom组件

3.值域漫游