直接放核心代码：
第一个柱状图:js脚本 这个用的是 echarts.js
$(document).ready(function(){
$.ajax({
//参照接口文档说明
url: '这里是返回数据的后端文件',
type: 'post',
data: {
text:num,
},
//返回值
dataType: 'json',
success: function (json){
shuju = json.msg;
var myChart = echarts.init(document.getElementById('_top'));
// 指定图表的配置项和数据
var option = {
//-------------- 标题 title ----------------
title: {
text: '次数统计',
textStyle:{ //---主标题内容样式
color:'#fff'
},
subtext:' 近50期', //---副标题内容样式
subtextStyle:{
color:'#bbb'
},
padding:[0,0,100,100] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
},
//---------------- 图例 legend -----------------
legend: {
type:'plain', //----图例类型，默认为'plain'，当图例很多时可使用'scroll'
top:'1%', //----图例相对容器位置,top\bottom\left\right
selected:{
'次数':true, //----图例选择,图形加载出来会显示选择的图例，默认为true
},
textStyle:{ //----图例内容样式
color:'#fff', //---所有图例的字体颜色
//backgroundColor:'black', //---所有图例的字体背景色
},
tooltip:{ //图例提示框，默认不显示
show:true,
color:'red',
},
data:[ //----图例内容
{
name:'出现次数',
icon:'circle', //----图例的外框样式
textStyle:{
color:'#fff', //----单独设置某一个图例的颜色
//backgroundColor:'black',//---单独设置某一个图例的字体背景色
}
}
],
},
//-------------- 提示框 -----------------
tooltip: {
show:true, //---是否显示提示框,默认为true
trigger:'item', //---数据项图形触发
axisPointer:{ //---指示样式
type:'shadow',
axis:'auto',
},
padding:5,
textStyle:{ //---提示框内容样式
color:"#fff",
},
},
//------------- grid区域 ----------------
grid:{
show:false, //---是否显示直角坐标系网格
top:80, //---相对位置，top\bottom\left\right
containLabel:false, //---grid 区域是否包含坐标轴的刻度标签
tooltip:{ //---鼠标焦点放在图形上，产生的提示框
show:true,
trigger:'item', //---触发类型
textStyle:{
color:'#fff',
},
}
},
//------------- x轴 -------------------
xAxis: {
show:true, //---是否显示
position:'bottom', //---x轴位置
offset:0, //---x轴相对于默认位置的偏移
type:'category', //---轴类型，默认'category'
name:'号码', //---轴名称
nameLocation:'end', //---轴名称相对位置
nameTextStyle:{ //---坐标轴名称样式
color:"#fff",
padding:[5,0,0,-5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//------------------- 箭头 -------------------------
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//------------------- 线 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 5, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
lineStyle:{
//color:'red',
//width:1,
//type:'solid',
},
},
splitArea:{ //--网格区域
show:false, //---是否显示，默认false
},
data: [这里是号码如（01，02，05，80）],//内容
},
//---------------------- y轴 ------------------------
yAxis: {
show:true, //---是否显示
position:'left', //---y轴位置
offset:0, //---y轴相对于默认位置的偏移
type:'value', //---轴类型，默认'category'
name:'出现次数', //---轴名称
nameLocation:'end', //---轴名称相对位置value
nameTextStyle:{ //---坐标轴名称样式
color:"#fff",
padding:[5,0,0,5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//------------------- 箭头 -------------------------
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//------------------- 线 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 8, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
lineStyle:{
color:'#666',
width:1,
type:'dashed', //---类型
},
},
splitArea:{ //--网格区域
show:false, //---是否显示，默认false
}
},
//------------ 内容数据 -----------------
series: [
{
name: '出现次数', //---系列名称
type: 'bar', //---类型
legendHoverLink:true, //---是否启用图例 hover 时的联动高亮
label:{ //---图形上的文本标签
show:false,
position:'insideTop', //---相对位置
rotate:0, //---旋转角度
color:'#eee',
},
itemStyle:{ //---图形形状
color:'rgb(70, 166, 245)',
barBorderRadius:[18,18,0,0],
},
barWidth:'15', //---柱形宽度
barCategoryGap:'2%', //---柱形间距
data: //这里是计算每个号码出现的次数
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}})
});
HTML代码，php后端的代码有点多我就不放出来了，需要的朋友自行研究或者来问我
<div id="_top" style="width: 100%; height: 300px; margin: 0 auto"></div>饼状图代码 js脚本这个用的是highcharts.js
直接引入
$(document).ready(function() {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
backgroundColor: 'rgba(0,0,0,0)',
};
var title = {
text: '近50期平均命中比例',
style:{
color:"#FF99"
}
};
var tooltip = {
pointFormat: '{point.percentage:.1f}%</b>',
};
var credits = {
enabled: false,
style:{
color:"#FF99"
}};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style:{
color:"#FF99",
fontSize:'20px'
}
}
}
};
var series= [{
type: 'pie',
colors:[
'rgb(9, 95, 134)',//第一个颜色，
'rgba(0, 255, 191,0.8)'
],
data: [
['错误率',50],//可以自行更改数字
['命中率',50],//可以自行更改数字
],
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.credits = credits;
json.plotOptions = plotOptions;
$('#ple').highcharts(json);
});
html代码
<div id="ple" style="width: 49%; height: 300px; margin: 0 auto;float:right;"></div>其它的图都是按照这两个方法来做，可以自己调整样式，后端实现原理：
利用ajax来发送数据给后端分析好了之后再返回前端就行了 然后把前端填写数据的地方改成
<?PHP echo php返回的数据 ?> 一般返回是数组格式直接可以放入data
来看看我的运行效果
仅供学习参考使用
成品源码下载点这里
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
