采用Ajax，通過php，從mysql取出數(shù)據(jù)，然后將數(shù)據(jù)使用ECharts展示。如果想要?jiǎng)討B(tài)刷新圖標(biāo)，那么設(shè)置一個(gè)定時(shí)器，定時(shí)取數(shù)，就可以達(dá)到目的。

數(shù)據(jù)庫

數(shù)據(jù)庫名：kali

表名：ecahrts

字段有：id city sun av qs詳細(xì)結(jié)構(gòu)如下：Idcitysunavqs1我15006781342

2非18004651245

3常2000346665

4的12004561432

5帥1750785412

配置php文件<?php

$mysqli=new mysqli('127.0.0.1','root','123456','kali');

mysqli_query($mysqli,"set names 'utf8'");

$sql="SELECT * FROM ecahrts";

$result = $mysqli->query($sql,MYSQLI_USE_RESULT);

if($result){

$i=0;

$categories=array();

$datas=array();

while($row = $result->fetch_assoc())

{

$categories[$i]=$row['city'];

$datas[$i]=$row['sun'];

$datas1[$i]=$row['av'];

$datas2[$i]=$row['qs'];

$i=$i+1;

}

$arr=array('categories'=>$categories,'data'=>$datas,'data1'=>$datas1,'data2'=>$datas2);

echo json_encode($arr);

}

$mysqli->close();

?>

主要參數(shù)說明：

讀取數(shù)據(jù)庫中的數(shù)據(jù)，并且復(fù)制給數(shù)組$arr

驗(yàn)證

將上面php保存為api.php,訪問127.0.0.1/api.php

這里需要注意的是，在數(shù)據(jù)庫中我的字段city是中文。Ajax讀取數(shù)據(jù)后是亂碼，于是我采用mysqli_query($mysqli,"set names 'utf8'");將其通過php編碼即可。

繪制圖表

引用各種js

核心代碼解讀function addData(){

$.get('aip.php').done(function(data,status) 從api.php中獲取數(shù)據(jù)

var data=eval('('+data+')'); //轉(zhuǎn)換為json

完整html代碼

index.html

使用

將index.html和api.php放到你的根目錄，修改數(shù)據(jù)庫信息和字段信息。訪問你的主機(jī)ip即可。

版權(quán)屬于：逍遙子大表哥

按照知識(shí)共享署名-非商業(yè)性使用 4.0 國際協(xié)議進(jìn)行許可，轉(zhuǎn)載引用文章應(yīng)遵循相同協(xié)議。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的echarts mysql_ECharts实现mysql 数据图表化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。