1、这里主要解决的问题就是通过php代码取mysql中的数据。 2、ajax取出每条折线使用使用的数据。 后台数据: #RecordsArray为自定义函数,可将sql语句转化为了二维数组
$sql="select kd_name,kd_nums,kd_date from t_kd where kd_name='顺风'"; $sf=RecordsArray($sql); $sql="select kd_name,kd_nums,kd_date from t_kd where kd_name='邮政'"; $yz=RecordsArray($sql); $sql="select kd_name,kd_nums,kd_date from t_kd where kd_name='圆通'"; $yt=RecordsArray($sql); $sql="select kd_name,kd_nums,kd_date from t_kd where kd_name='中通'"; $zt=RecordsArray($sql); #将所有数据组合成一个新数组 $data=array('sf'=>$sf,'yz'=>$yz,'yt'=>$yt,'zt'=>$zt); #输出json为ajax调用 echo json_encode($data,JSON_UNESCAPED_UNICODE);
下面是javascript代码
javascript代码 < script type = "text/javascript" > function loadData(option) { $.ajax({ type: 'post', //传输类型 async: false, //同步执行 url: '/t/data.php', //web.xml中注册的Servlet的url-pattern data: {}, dataType: 'json', //返回数据形式为json success: function(result) { if (result) { option.series[0].data = []; option.series[1].data = []; option.series[2].data = []; option.series[3].data = []; $.each(result, function(index, values) { if (index == "sf") { $.each(values, function(index, nvalues) { option.series[0].data.push(nvalues["kd_nums"]); }) //console.log(values["kd_name"]); } if (index == "yz") { $.each(values, function(index, nvalues) { option.series[1].data.push(nvalues["kd_nums"]); }) } if (index == "yt") { $.each(values, function(index, nvalues) { option.series[2].data.push(nvalues["kd_nums"]); }) } if (index == "zt") { $.each(values, function(index, nvalues) { option.series[3].data.push(nvalues["kd_nums"]); }) } }) } }, error: function(errorMsg) { alert("加载数据失败"); } }); //AJAX } //初使化图形 var myChart = echarts.init(document.getElementById('myDiv')); option = { color: ['#ff3d3d', '#00a0e9', '#f603ff', '#00b419', '#5f52a0'], tooltip: { trigger: 'axis' }, legend: { x: 'left', padding: [10, 20, 0, 20], data: ['顺丰', '邮政', '圆通', '中通', '天天'], selected: { '顺丰': true, '邮政': true, '圆通': true, '中通': true, '天天': false } }, grid: { left: '0', right: '3%', bottom: '3%', top: '13%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, splitLine: { //网格线 show: true, lineStyle: { color: ['#b1b1b1'], type: 'dashed' } }, data: ['3.1', '3.2', '3.3', '3.4', '3.5', '3.6', '3.7', '3.8', '3.9', '3.10', '3.11', '3.12'] }, yAxis: { splitLine: { //网格线 show: true, lineStyle: { color: ['#b1b1b1'], type: 'dashed' } } }, series: [{ name: '顺丰', type: 'line', data: [], label: { normal: { show: true, position: 'top' //值显示 } } }, { name: '邮政', type: 'line', data: [], label: { normal: { show: true, position: 'top' } } }, { name: '圆通', type: 'line', data: [], label: { normal: { show: true, position: 'top' } } }, { name: '中通', type: 'line', data: [], label: { normal: { show: true, position: 'top' } } }, { name: '天天', type: 'line', label: { normal: { show: true, position: 'top' } } }] }; //加载数据到图像option中 loadData(option); //设置option,生成图像 if (option && typeof option === "object") { myChart.setOption(option, true); } < /script>
Echarts折线图堆叠取mysql后台数据库实例
最新推荐文章于 2024-08-09 20:19:59 发布