echarts是一款可視化圖表庫，可以準(zhǔn)確、直觀地展示各類數(shù)據(jù)。而MySQL是一款流行的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，其功能強(qiáng)大，可以完成數(shù)據(jù)存儲、查詢和管理等一系列操作。

使用這兩款工具可以實(shí)現(xiàn)數(shù)據(jù)的可視化展示和數(shù)據(jù)存儲管理。下面是一個echarts mysql實(shí)例：

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:['訪問次數(shù)']
},
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : [
{
type : 'category',
data : []
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'訪問次數(shù)',
type:'line',
data:[],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
};
// 設(shè)置option的xAxis數(shù)據(jù)和series數(shù)據(jù)
user.getRequestData(function(result){
option.xAxis[0].data = result.xAxisData;
option.series[0].data = result.seriesData;
// echarts圖表渲染
mychart.setOption(option);
});
});
// 數(shù)據(jù)請求
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請求數(shù)據(jù)的方法。通過調(diào)用后臺的get_data_from_mysql.php方法，獲取到需要可視化展示的數(shù)據(jù)，進(jìn)行數(shù)據(jù)的處理和echarts的option定義，最終通過調(diào)用echarts的setOption方法進(jìn)行圖表的渲染。