怎么样让ECharts从后台获取数据并展示

Posted 2023-03-18

参考技术A //使用Ajax请求你的servlet或者controller或者action 然后获取数据
$.get('Query_RealTimeServlet').done(function jzdata(result) 
                        //有可能出现没转换成功的json数据 再转换一次
var json = JSON.parse(result);

//用数组存储数据 我这边有三个
//xdata 是X轴的数据
// ldata rdata是表中的两条折线
var xdata = new Array();
var ldata = new Array();
var rdata = new Array();
//循环 存入数组
for (var i = 0; i < json.length; i++) 
var timestr = json[i].updatetime;
xdata.push(timestr.substr(11));
ldata.push(json[i].left_torque);
rdata.push(json[i].right_torque);

//将数组中的数据存放
torque_chart.setOption(
xAxis : 
data : xdata
,
series : [

name : '左轮',
data : ldata
,

name : '右轮',
data : rdata

]
);
);

//这一块只是Ajax的请求存放数据 前边你还得自己设置你的图表样式 比如下边的
//js是我存放javascript的文件夹名称 你用你自己的
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/esl.js"></script>
//初始化 XXXecharts图
var XXX= echarts.init(document.getElementById("你要放置echarts图的DIV的ID 这个DIV必须有宽高"));


//XXX图的    配置项
XXX.setOption(
//设置标题
title : 
text : '自己起个标题',
textStyle : 
color : '#FFFFFF',
fontSize : 20,

,
//设置图例组件
legend : 
left : '40%',
top : '10%',
data : [ 'L', 'R' ]
,
//设置X轴
xAxis : 
name : 'time',
nameTextStyle : 
color : '#FFFFFF'
,
type : 'category',
//名字与坐标轴的距离
nameGap : '5',
//ajax获取时间
data : []
,
//设置Y轴
yAxis : 
name : 'a',
nameTextStyle : 
color : '#FFFFFF'
,
splitLine : 
show : false,

,
//设置图表类型
series : [
//第一条线 L

type : 'line',
name : 'L',
itemStyle : 
normal : 
color : '#1F77D1',

,
lineStyle : 
normal : 
color : '#1F77D1',

,
data : []
,
//第二条线 R

type : 'line',
name : 'R',
itemStyle : 
normal : 
color : '#D35321',

,
lineStyle : 
normal : 
color : '#D35321',

,
data : []

]
);
    //补充 Ajax是在设置完图表之后的  之后的  之后的
    
    设置定时请求 每隔1000 (1秒)请求一次 视你的数据上传频率为准
    setInterval(function xxx(), 1000);

参考技术B 一般用ajax吧，不过我之前用highcharts时，直接把图表嵌入到了后台代码中

echarts怎么连mysql

echarts是一个js开源绘图工具，他只能从服务端获取数据进行绘图，自己并没有直接连接数据库的api，要配合php jsp asp python等服务端才可以完成绘图的。 参考技术A echarts是一个前端数据图形化的工具库。
一般连mysql的都是后台服务，比如nodejs，java，php，python等，
读取数据库中的数据返回给前端，再用echarts将数据展示成图表形式
echarts本身不能直接连接mysql数据库。