echarts 绘制动态图表

最新推荐文章于 2024-09-28 22:46:23 发布

叫我楼主

最新推荐文章于 2024-09-28 22:46:23 发布

阅读量1.5k

点赞数

文章标签：数据库

本文链接：https://blog.csdn.net/qq_23077661/article/details/64126119

版权

本文档展示了如何使用Echarts库动态加载数据库数据来创建动态图表，包括SO2、pH、温度和湿度的折线图。通过AJAX获取JSON数据，并利用Echarts的动态数据接口`myChart.addData()`实现数据更新，同时还提供了警告提示功能，当数据超标时会记录并显示警告信息。

摘要由CSDN通过智能技术生成

之前我对数据库数据进行展示的时候已经可以利用echarts绘制了一个图表，但是我想要的图表是可以像它官网那样，动画式的，然后我看了很久它的官网和百度了很多别人的方法，最终写出来了。

废话不多说，直接附代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<script src="../../USV/echarts/jquery-3.0.0.min.js"></script>
<script src="../echarts/echarts.min.js"></script>
<script src="../echarts/macarons.js"></script>
<script type="text/javascript">
//数组存储json数据
var time=[];
var so2=[];
var ph=[];
var humid=[];
var temp=[];

//普通变量
var i=0;
var num=1000;
var myChart;
var timeTicket;
</script>
<script type="text/javascript">
//图表实现部分

$(function(){
//图表绘制
myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '动态数据',
subtext: '纯属虚构'
},

tooltip: {
trigger: 'axis',

},
legend: {
show:true,
data:['SO2','pH ','温度','湿度']
},
toolbox: {
show: true,
feature: {
mark:{show:true},
datazoom:{show:true},
dataView:{show:true},
magicType:{show:true,type:['line','bar']},
restore:{show:true},
saveAsImage:{show:true}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis:
[
{
type: 'category',
boundaryGap: false,
data: []
}
],
yAxis:
[
{