HTML：
<div id="container1" style="height:350px; " ></div>
<div id="container2" ></div>
JS：（引入的有关highcharts的js可在highcharts的官网中获得：https://www.hcharts.cn/demo/highcharts）
<script src="../js/heightcharts/highcharts.js"></script>
<script src="../js/heightcharts/highcharts-3d.js"></script>
<script src="../js/heightcharts/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
//自定义图的颜色
Highcharts.setOptions({
colors: ['#267cb7', '#FF9C30', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
//饼状图
$('#container1').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
marginRight: 0
},
title: {
text: '每日全部订单完成率'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {//控制图例显示位置 （和 chart: 里面的 marginRight: 0结合使用）
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth: 0,
x: -500,
y:80
},
series: [{
type: 'pie',
name: '占百分比',
data: [
//{
// name: 'Chrome',
// y: 12.8,
// sliced: true,
// selected: true
//},
['已完成', <%=FinishTotalCoal%>],
['未完成', <%=RoughTotalCoal%>]
]
}],
});
//柱状图
$('#container2').highcharts({
chart: {
backgroundColor: 'rgba(128, 128, 128, 0.05)',
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 1,
viewDistance: 25,
depth: 100
},
marginTop: 80,
marginRight: 40
},
title: {
text: '每日每个订单完成率'
},
xAxis: {
categories: [<%=Xline%>]
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: '完成率（%）'
}
},
tooltip: {
pointFormat: '<span style="color:#267cb7">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent',
depth: 50
}
},
series: [{
name: '未完成',
data: [<%=OrderRough%>]
}, {
name: '已完成',
data: [<%=OrderFinish%>]
}],
legend: {
enabled: false,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'left',
x: 100,
verticalAlign: 'top',
y: 70
}
});
});
</script>
其他统计图请参考官网：https://www.hcharts.cn/demo/highcharts