通过按钮触发
html <script src="jquery.min.js"></script> <div id=qzs style=" 382px;height:282px;position:absolute; background-color:#ff0000; left: 109px; top: 133px;"><a href="#" onClick=setInterval("shoppingcat()",1) >点击我就运行js -jquery函数</a></div> js function shoppingcat(){ document.getElementById("qzs").style.display = "none"//不显示 //document.getElementById("qzs").style.display = "block"//显示 }
http://jquery.cuishifeng.cn/jQuery.Ajax.html
一、通过按钮触发运行
document.getElementById("qzs") 通过div 的id定位 选择 改变对象
二、直接打开网页就运行 通过 ajax 联系 php 到数据库 取数据 还要打包成json格式
json 格式 {} 对象 【】数组
var myChart = echarts.init(document.getElementById('bar_week')); var arr1=[],arr2=[],arr3=[]; function arrTest(){ $.ajax({ type:"post", async:false, url:"data.php", data:{}, dataType:"json", success:function(result){ //{"daming":[53,54,53],"ming":[56,59,57],"jin":[62,114,93],"zuo":[58,113,90]} //[{"public_zao":53,"public_zhong":54,"public_wan":53}] if (result) { for (var i = 0; i < result.length; i++) { arr1.push(result[i].public_zao); arr2.push(result[i].public_zhong); arr3.push(result[i].public_wan); } } } }) return arr1,arr2,arr3; } arrTest(); var option = { tooltip: { show: true }, legend: { data:['早餐报餐'] }, xAxis : [ { type : 'category', //data : arr1 data: ["大明天","明天","今天","昨天"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"早餐报餐", "type":"bar",//funnel bar 柱形图 "data":arr1, //barWidth : 39, //柱体大小 itemStyle: { //上方显示数值 normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 16 } } } } } ] }; // 为echarts对象加载数据 myChart.setOption(option); // }