highchart的基本使用
使用highchart之前需要下载highchart的js
可以去官网看看并下载:
https://www.highcharts.com.cn/demo/highcharts/spline-symbols
我直接选的下面这种方式
然后在需要 highchart 的地方进行导入
<script src="http://cdn.highcharts.com.cn/highcharts/10.0.0/highcharts.js"></script>
然后在创建一个处理highchart的文件的js和当前页面的js并导入进来
<script src="{{ buildStaticUrl('/js/charts.js') }}"></script>
<script src="{{ buildStaticUrl('/js/index/index.js') }}"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/10.0.0/highcharts.js"></script>
找到想要的折线图在点击js
可以去看看官网写的js,然后,我做的方法是将处理highchart单独写一个js,用当前页面的js去调用处理highchart的js
处理highchart的js,代码在最后
当前页面使用Ajax去访问服务器成功后并调用处理highchart的js
服务器需要返回的数据格式:
效果图:
这样感觉有点丑我们还可以做美化
美化效果效果:
代码:
渲染,美化highchart的js代码
:
/**
* Created by redmi on 2022/5/10.
*/
;
var charts_ops = {
//美化折线图
setOption: function () {
Highcharts.setOptions({
chart: {},
exporting: {
enabled: false
},
legend: {
//enabled:false
},
credits: {
enabled: false
},
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
'#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4', '#E93EFF'],
title: '',
xAxis: {
tickWidth: 0,
lineWidth: 0,
gridLineColor: '#eee',
//gridLineWidth: 1,
crosshair: {
width: 1,
color: '#ebebeb'
}
},
yAxis: {
gridLineColor: '#eee',
gridLineWidth: 1,
title: ''
},
plotOptions: {
column: {
pointPadding: 0.2,
pointWidth: 20,
borderWidth: 0
},
series: {
marker: {
enabled: false
},
},
line: {
lineWidth: 2,
states: {
hover: {
lineWidth: 2
}
}
}
},
tooltip: {
backgroundColor: '#404750',
borderWidth: 0,
shadow: false,
headerFormat: '',
footerFormat: '',
shared: true,
useHTML: true,
style: {
color: '#fff',
padding: '5px'
}
},
lang: {
noData: "暂无数据"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
}
});
},
//渲染数据
drawLine: function (target, data) {
var chart = target.highcharts({
chart: {
type: 'spline'
},
xAxis: {
categories: data.categories
},
series: data.series,
// 标题出现在右上角
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
x: 0,
y: -15
}
});
return chart
}
}
当前页面js
/**
* Created by redmi on 2022/5/10.
*/
;
var dashboard_index_ops = {
init: function () {
this.drawChart()
},
drawChart: function () {
$.ajax({
url:common_ops.buildUrl("/chart/dashboard"),
dataType: "json",
success:function (res) {
charts_ops.drawLine($("#member_order"),res.data)
}
});
$.ajax({
url:common_ops.buildUrl("/chart/finance"),
dataType: "json",
success:function (res) {
charts_ops.drawLine($("#finance"),res.data);
charts_ops.setOption();
}
});
}
};
$(document).ready(function () {
dashboard_index_ops.init()
});
服务器需要返回的数据格式
resp = {"code": 200, "msg": "操作成功", "data": {}}
data = {
"categories":[],
"series":[
{
"name":"会员总数",
"data":[]
},
{
"name": "订单总数",
"data": []
}
]
}