【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”
@Liuzh_533 你好,想跟你请教个问题:
"你可以使用本项目直接构造一个Option对象,转换为JSON后直接用js设置myChart.setOption(option)"关于文档里的这句话,有实际的demo吗,我做了,但是图表总是显示不出来。转成JSON是使用GsonOption的toString方法吗?
我的java代码:
@RequestMapping("/chartData")
@ResponseBody public String chartData() {
GsonOption option = new GsonOption();
option.legend("zzzzz");
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar), Tool.restore, Tool.saveAsImage);
option.calculable(true);
option.tooltip().trigger(Trigger.axis).formatter("Temperature : <br/>{b}km : {c}°C");
ValueAxis valueAxis = new ValueAxis();
valueAxis.axisLabel().formatter("{value} °C");
option.xAxis(valueAxis);
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.axisLine().onZero(false);
categoryAxis.axisLabel().formatter("{value} km");
categoryAxis.boundaryGap(false);
categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80,90);
option.yAxis(categoryAxis);
Line line = new Line();
line.smooth(true).name("zzzzzzzzzzz").data(15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
option.series(line);
return option.toPrettyString();
}
jsp页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="echarts/build/dist/echarts.js"></script>
<script src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
var myChart;
var eCharts;
require.config({
paths : {
'echarts' : 'echarts/build/dist' ,
}
});
require(
[ 'echarts',
'echarts/chart/bar',
'echarts/chart/line'
], drawEChart //异步加载的回调函数绘制图表
);
//创建ECharts图表方法
function drawEChart(ec) {
eCharts = ec;
myChart = eCharts.init(document.getElementById('main'));
myChart.showLoading({
text : "图表数据正在努力加载..."
});
myChart.hideLoading();
getChartData();//aja后台交互
}
</script>
<script type="text/javascript">
function getChartData() {
//获得图表的options对象
//通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
url : "echarts/chartData.shtml",
data : {},
dataType : "JSON", //返回数据形式为json
success : function(result) {
if (result) {
myChart.hideLoading();
myChart.setOption(result);
}
},
error : function(errorMsg) {
alert("不好意思,大爷,图表请求数据失败啦!");
myChart.hideLoading();
}
});
}
</script>
</body>
</html>
项目下面的test中有各种各样的例子,和Echarts官方的是对应的,你可以看看。
另外我osc博客有一篇特别简单的例子,你可以参考。