echartsjs根后台数据动态更新数据显示：
function initDefaultChart(ec){
echarts = ec;
var list_devData = ${pointDataMassage};
/ consoleinfo(list_devData); /
var str = "";
for (var one in list_devData){
/ consoleinfo("one",list_devData[one]); /
var id_data =list_devData[one]dataId;
var data_unit = list_devData[one]dataUnit;
var dataSort = list_devData[one]dataSort;
/ consoleinfo("id",id_data); /
if(documentgetElementById("attr_"+id_data)!=undefined){/ !exp && typeof(exp)!="undefined" && exp!=0 /
var myChart = ecinit(documentgetElementById("attr_"+id_data));
var option = {
tooltip : {
formatter: "{b} <br/>{c}{a}"
},
toolbox: {
show : false,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
}
}
首先，在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是绘图的第三方插件；jquery是js的封装插件。 其实从插件的角度来说，他们是并列的。
用echarts绘图的时候，可以用个jquery获取后台的数据，填充到echarts里面的data里面去，可明白了？
获取数据：即然已经生成了图表了，证明这些数据已经获取到了；
写excel：可以通过jxl写excel，保存到服务器；
下载excel：根据服务器地址+文件路径就可以下载excel文件了；
Echarts是前端的图表，百度上有Demo的，只要从后台向前台传递json数据，解析下绑定到Echarts上，即可显示效果。
步骤：
后台取到数据，转化为json；
前台获取到json，改写Echarts调用的js；
以上就是关于echarts.js怎么根后台数据动态更新数据显示全部的内容，包括:echarts.js怎么根后台数据动态更新数据显示、echarts图表，怎么获取当前选择的X轴的值、echarts 是基于jquery的么等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）