php chart 多拆线,echarts结合php实现双折现事例

效果图

图片.png

页面代码

echarts

$(document).ready(function () {

// 绘制反馈量图形

var init_echarts = function () {

var refreshChart = function (show_data) {

my_demo_chart = echarts.init(document.getElementById('echart_show'));

my_demo_chart.showLoading({

text: '加载中...',

effect: 'whirling'

});

var echarts_all_option = {

title: {

text: '动态数据',

subtext: '纯属虚构'

},

tooltip: {

trigger: 'axis'

},

legend: {

data: ['最新成交价', '预购队列']

},

toolbox: {

show: true,

feature: {

mark: {show: true},

dataView: {show: true, readOnly: false},

magicType: {show: true, type: ['line', 'bar']},

restore: {show: true},

saveAsImage: {show: true}

}

},

dataZoom: {

show: false,

start: 0,

end: 100

},

xAxis: [

{

type: 'category',

boundaryGap: true,

data: (function () {

var now = new Date();

var res = [];

var len = 10;

while (len--) {

res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));

now = new Date(now - 1000 * 60 * 60);

console.log(now);

}

return res;

})()

},

{

type: 'category',

boundaryGap: true,

data: (function () {

var res = [];

var len = 10;

while (len--) {

res.push(len + 1);

}

return res;

})()

}

],

yAxis: [

{

type: 'value',

scale: true,

name: '价格',

boundaryGap: [0.2, 0.2]

},

{

type: 'value',

scale: true,

name: '预购量',

boundaryGap: [0.2, 0.2]

}

],

series: [

{

name: '预购队列',

type: 'line',

xAxisIndex: 1,

yAxisIndex: 1,

// 获取到数据库的数据

data: show_data[0]

},

{

name: '最新成交价',

type: 'line',

// 实时获取的数据

data:show_data[1]

}

]

};

my_demo_chart.hideLoading();

my_demo_chart.setOption(echarts_all_option);

};

// 获取原始数据

$.ajax({

url: "http://localhost/chart/test.php",

data: {type: "2"},

success: function (data) {

// 根据数据库取到结果拼接现在结果

refreshChart(eval(data));

}

});

};

// 开启实时获取数据更新

$("#getData").on("click",function() {

var timeTicket;

var lastData = 11;

var axisData;

clearInterval(timeTicket);

timeTicket = setInterval(function () {

// 获取实时更新数据

$.ajax({

url: "http://localhost/chart/test.php",

data: {type: "new"},

success: function (data) {

// 根据条件转换成相应的api 转化为echart 需要的数据

// todo 更新数据采用随机更新的方式

lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);

lastData = lastData.toFixed(1) - 0;

axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

// 动态数据接口 addData

my_demo_chart.addData([

[

0, // 系列索引

Math.round(Math.random() * 1000), // 新增数据

true, // 新增数据是否从队列头部插入

false // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头

],

[

1, // 系列索引

lastData, // 新增数据

false, // 新增数据是否从队列头部插入

false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头

axisData // 坐标轴标签

]

]);

}

});

}, 2100);

// 关闭更新操作

$("#stopData").on("click", function () {

clearInterval(timeTicket);

});

});

// 默认加载

var default_load = (function () {

init_echarts();

})();

});

php代码

// 连接服务器

$conn = mysql_connect("localhost", "root", "root");

if (!$conn) {

echo "Unable to connect to DB: " . mysql_error();

exit;

}

if (!mysql_select_db("amu")) {

echo "Unable to select mydbname: " . mysql_error();

exit;

}

// 根据传输过来的数据获取数据

$static_sql = "select v ,k from test where type = 2 limit 10";

// 获取数据之后返回

$res = mysql_query($static_sql);

if ($res) {

while ( $row =mysql_fetch_row($res)) {

$v[] = intval($row[0]);

$k[] = intval($row[1]);

}

mysql_free_result($res);

}

$return = array($v,$k);

echo json_encode($return);

?>

数据SQL脚本

#

# Structure for table "test"

#

DROP TABLE IF EXISTS `test`;

CREATE TABLE `test` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`v` varchar(25) DEFAULT NULL,

`k` varchar(25) DEFAULT NULL,

`type` varchar(25) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;

#

# Data for table "test"

#

/*!40000 ALTER TABLE `test` DISABLE KEYS */;

INSERT INTO `test` VALUES (1,'32','5','2'),(2,'34','2','2'),(3,'12','7','2'),(4,'21','3','2'),(5,'9','1','2'),(6,'7','2','2'),(7,'5','7','2'),(8,'45','6','2'),(9,'41','5','2'),(10,'78','3','2');

/*!40000 ALTER TABLE `test` ENABLE KEYS */;