html部分的代碼
<html> <head> <title>bingtu.html</title> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts-en.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> </head> </head> <body> <p id="main" style="border:1px solid red;height:400px;"></p> </body></html>
js部分的代碼
<script> var chart = echarts.init(document.getElementById('main')); chart.setOption({ title:{ text : '非同步載入', }, tooltip: {}, legend:{ data:['銷量'], }, xAxis:{ data:[], }, yAxis:{}, series:[{ name:'銷量', type:'bar', data:[] }] }); var categories = [] , data = []; /*注意一下 {:url()} 這一塊填寫你要請求的地址 你可以是http://.....com 也可以是你項目中某塊檔案 Index/index*/ $.post("{:url('ticket/getSellRecord',['type'=>'week'])}").done(function (info) { // 填入資料 /*特別注意這裡 如果info是json對象就不用JSON.parse了 如果是json字串就要轉成對象*/ console.log(info); info = JSON.parse(info); for(var i = 0 ; i < info.length ; i++) { categories.push(info[i]['seller_id']); data.push(info[i]['amount']); } chart.setOption({ xAxis: { data: categories }, series: [{ // 根據名字對應到相應的系列 name: '銷量', data: data }] });});</script>
php部分代碼
<?php /*你可以設個定值去測試 ， 動態就是你從資料庫去擷取 這部分主要的是格式*/ /*返回的資料格式為json 在js中列印一下傳過去的資料是json字串還是json對象 如果是json字串一定要轉成json對象 可用JSON.parse */ $data = [["seller_id"=>2,"amount"=>"2000"],["seller_id"=>8,"amount"=>"501"]]; return json_encode($data);?>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
