曲线面积图:
1、首先引入Highcharts文件,因为我用的是layui框架所以会有一些冲突,特此将 highcharts.js献上:https://pan.baidu.com/s/1lLJ7k83W1GgnbI0Xt4Uqhw 提取码:jyoi 或者扫描二维码
首先引入highcharts文件与我们写图表js的文件
并且定义好两个id
现在去执行这个方法获取数据并渲染
//转义
function HTMLDecode(input) {
var converter = document.createElement("DIV");
converter.innerHTML = input;
var output = converter.innerText;
converter = null;
return output;
}
//数据概况历史总收入历史总支出、ROI图标
function _initOverviewHighcharts(start_date, end_date) {
$.ajax({
type: 'POST',
url: "/game/overview/getChartsData",
data:
{
start_date: start_date,
end_date: end_date
},
dataType: 'json',
success: function (data) {
data = $.parseJSON(data)
var chartsDate = JSON.parse(HTMLDecode(data.chartsDate));
var chartsData = JSON.parse(HTMLDecode(data.chartsData));
var chartsRoiData = JSON.parse(HTMLDecode(data.chartsRoiData));
// 图表初始化函数
option = {
chart: {
type: 'areaspline'
},
exporting: {
allowHTML: true,
buttons: {
enabled: true
}
},
title: {
text: '历史总收入、支出走势'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: -10,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [],
},
yAxis: {
title: {
text: '单位: 元'
},
labels: {
formatter: function () {
return this.value / 10000 + '万';
}
}
},
tooltip: {
shared: true,
valueDecimals: 2,
valueSuffix: '元'
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
},
series: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[3]).setOpacity(0).get('rgba')]
]
}
}
},
series: []
};
option1 = {
chart: {
type: 'areaspline'
},
title: {
text: '累计ROI走势'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: -10,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [],
},
yAxis: {
title: {
text: '单位: 百分比'
},
labels: {
formatter: function () {
return this.value / 10 + '0';
}
}
},
tooltip: {
shared: true,
valueDecimals: 2,
valueSuffix: '%'
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: []
};
$.each(chartsDate, function (key, item) {
option.xAxis.categories.push(item);
option1.xAxis.categories.push(item);
});
option.series = chartsData;
option1.series = chartsRoiData;
Highcharts.chart('container_1', option);
Highcharts.chart('container_2', option1);
}
});
}
这边是两个图表。通过ajax请求数据,请求到之后进行转义,渲染。
附带后端代码:
可能有点low,我在后端直接把数据组装起来了。
public function getChartsData()
{
$start_date = input('start_date');
$end_date = input('end_date');
$gameid = $this->getUserDefaultGameID();
$chartsDb = Db::connect('mysql')->table(TB_OVERVIEW);
$charts = $chartsDb->field("date,IFNULL(round(income_sum/100,2),0.00) as 'income_sum',IFNULL(round(pay_sum/100,2),0.00) as 'pay_sum',IFNULL(round(income_sum/pay_sum*100,2),0.00) as 'roi'")->order("date asc")->where(['isdel' => 0, 'gameid' => $gameid])->whereBetween('date', [$start_date, $end_date])->select()->toArray();
$chartsDate = array_column($charts, 'date');
$chartsDatas = [
[
'name' => '历史总收入',
'data' => json_decode('[' . join(',', array_column($charts, 'income_sum')) . ']', true)
],
[
'name' => '历史总支出',
'data' => json_decode('[' . join(',', array_column($charts, 'pay_sum')) . ']', true)
]
];
$chartsRoiDatas = [
[
'name' => '累计Roi',
'data' => json_decode('[' . join(',', array_column($charts, 'roi')) . ']', true)
]
];
$returnData = [
'chartsDate' => json_encode($chartsDate),
'chartsData' => json_encode($chartsDatas),
'chartsRoiData' => json_encode($chartsRoiDatas),
];
return json_encode($returnData);
}
此博客给自己看的。实现效果就好