<div class="details1">
<div id="line-main" style="100%;height:400px"></div>
</div>
function getXYdata() {
var xdata,ydata;
$.ajax({
type:"get",
data:{},
url:"http://jsonplaceholder.typicode.com/posts",
async:true,
contentType:"application/json",
dataType:"json",
success:(data)=>{
console.log(data);
var rt={
des:{nums: ["10", "6", "4", "4", "2"],
st: ["待支付", "待上门", "已完结", "正在服务中", "其它"],
timescope: ["2019/04/01 00:00:00", "2019/04/30 23:59:59"],
ttlnums: 10},
isok: true,
r: "ok",
run_times: [],
status: 1
}
g_clicker.find('span').html( g_clicker2.html() + ':' + rt.des.ttlnums);
xdata = rt.des.st;
ydata = rt.des.nums;
for(var key in ydata){
ydata[key] = parseInt(ydata[key]);
}
console.log(ydata)
showGraph(xdata,ydata,rt.des.timescope[0] + ' ~ ' + rt.des.timescope[1] + ' ' + g_clicker2.html());
}
})
}
function showGraph(xdata,ydata,title) {
$('#line-main').highcharts({
chart: {
type: 'bar',
},
title: {
text: title,
style:{
color:'#333',
fontSize:'15px',
fontWeight:'bold',
}
},
xAxis: {
tickmarkPlacement:'on',
tickColor:'#C8D6E4',
gridLineColor:'#fff',
categories: xdata,
plotLines:[{
color:'#FF9641', //线的颜色,定义为红色
dashStyle:'shortdot',//标示线的样式,默认是solid(实线),这里定义为长虚线
value:0, //定义在那个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
width:1, //标示线的宽度,2px
}]
},
credits: {
enabled:false
},
yAxis: {
gridLineColor: '#f0f0f0',//网格线颜色
gridLineDashStyle: 'Solid',//网格线样式
gridLineWidth: 1,//网格线宽度
title: {
text: ' ',
},
labels: {
formatter: function() {
return this.value +'';
}
}
},
tooltip: {
// backgroundColor:'#555556', //悬停信息弹窗配置
// borderColor:'#555556',
// borderRadius:'0',
// borderWidth:'3px',
width:'150px',
crosshairs: false,
shared: true,
style:{
width:'150px',
color:'#000',
}
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#FF9641',
lineWidth: 1,
dashStyle:'shortdot',
}
},
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointPadding: 0, //数据点之间的距离值
groupPadding: 0, //分组之间的距离值
borderWidth: 0,
shadow: false,
pointWidth:25, //柱子之间的距离值
states: {
hover: {
// enabled: false 禁止
// fillColor:"#ff0000",
// backgroundColor:"#ff0000",
color: '#ccc'
}
}
}
},
legend: {
enabled: false,
},
series: [{
width:'150px',
name: '工单量',
color:'#FF9641',
fonrSize:'14px',
fontWeight:'bold',
marker: {
symbol: 'circle',
},
data: ydata
}]
});
}
带立体的
function getXYdata() {
var xdata,ydata;
$.ajax({
type:"get",
data:{},
url:"http://jsonplaceholder.typicode.com/posts",
async:true,
contentType:"application/json",
dataType:"json",
success:(data)=>{
console.log(data);
var rt={
des:{nums: ["10", "6", "4", "4", "2"],
st: ["待支付", "待上门", "已完结", "正在服务中", "其它"],
timescope: ["2019/04/01 00:00:00", "2019/04/30 23:59:59"],
ttlnums: 10},
isok: true,
r: "ok",
run_times: [],
status: 1
}
g_clicker.find('span').html( g_clicker2.html() + ':' + rt.des.ttlnums);
xdata = rt.des.st;
ydata = rt.des.nums;
for(var key in ydata){
ydata[key] = parseInt(ydata[key]);
}
console.log(ydata)
showGraph(xdata,ydata,rt.des.timescope[0] + ' ~ ' + rt.des.timescope[1] + ' ' + g_clicker2.html());
}
})
}
var colorArr = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8','#8d4653', '#91e8e1','#000000','#560f23'];
function showGraph(xdata,ydata,title) {
var colors = Highcharts.getOptions().colors;
$.each(colors, function(i, color) {
console.log(color);
colors[i] = {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
stops: [
[0, color],
[0.3, 'white'],
[1, color]
]
};
});
$('#line-main').highcharts({
chart: {
type: 'bar',
// type: 'column'
},
title: {
text: title,
style:{
color:'#333',
fontSize:'15px',
fontWeight:'bold',
}
},
xAxis: {
tickmarkPlacement:'on',
tickColor:'#C8D6E4',
gridLineColor:'#fff',
categories: xdata,
plotLines:[{
color:'#FF9641', //线的颜色,定义为红色
dashStyle:'shortdot',//标示线的样式,默认是solid(实线),这里定义为长虚线
value:0, //定义在那个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
width:1, //标示线的宽度,2px
}]
},
credits: {
enabled:false
},
yAxis: {
gridLineColor: '#f0f0f0',//网格线颜色
gridLineDashStyle: 'Solid',//网格线样式
gridLineWidth: 1,//网格线宽度
title: {
text: ' ',
},
labels: {
formatter: function() {
return this.value +'';
}
}
},
tooltip: {
// backgroundColor:'#555556', //悬停信息弹窗配置
// borderColor:'#555556',
// borderRadius:'0',
// borderWidth:'3px',
width:'150px',
crosshairs: false,
shared: true,
style:{
width:'150px',
color:'#000',
}
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#FF9641',
lineWidth: 1,
dashStyle:'shortdot',
}
},
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointPadding: 0, //数据点之间的距离值
groupPadding: 0, //分组之间的距离值
borderWidth: 0,
shadow: false,
pointWidth:25, //柱子之间的距离值
states: {
hover: {
// enabled: false 禁止
// fillColor:"#ff0000",
// backgroundColor:"#ff0000",
color: '#80bff6'
}
}
}
},
legend: {
enabled: false,
},
series: [{
width:'150px',
name: '工单量',
color:'#FF9641',
fonrSize:'14px',
fontWeight:'bold',
marker: {
symbol: 'circle',
},
data: ydata
}]
}, function (chart) {
SetEveryOnePointColor(chart);
});
}
function SetEveryOnePointColor(chart) {
var pointsList = chart.series[0].points;
for (var i = 0; i < pointsList.length; i++) {
chart.series[0].points[i].update({
color: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
stops: [
[0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
[0.5, 'rgb(255, 255, 255)'],
[1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]
]
}
});
}
}