echars mysql |mysql 5.6 bin-log

使用这两款工具可以实现数据的可视化展示和数据存储管理。下面是一个echarts mysql实例：

require(['echarts', 'echarts/chart/bar', 'echarts/chart/line', 'user'], function(ec, ecBar, ecLine, user){
// echarts图表渲染引擎初始化
var mychart = ec.init(document.getElementById('show'));
// 定义echarts的option
var option = {
legend: {
data:['访问次数']
},
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : [
{
type : 'category',
data : []
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'访问次数',
type:'line',
data:[],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
};
// 设置option的xAxis数据和series数据
user.getRequestData(function(result){
option.xAxis[0].data = result.xAxisData;
option.series[0].data = result.seriesData;
// echarts图表渲染
mychart.setOption(option);
});
});
// 数据请求
var user = {
getRequestData : function(callback){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var data = JSON.parse(xhr.responseText);
callback(data);
}
};
xhr.open('GET', '/get_data_from_mysql.php', true);
xhr.send();
}
};

其中，getRequestData是一个AJAX请求数据的方法。通过调用后台的get_data_from_mysql.php方法，获取到需要可视化展示的数据，进行数据的处理和echarts的option定义，最终通过调用echarts的setOption方法进行图表的渲染。