120 lines
3.2 KiB
HTML
120 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>schart.js 案例演示</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.main {
|
|
text-align: center;
|
|
}
|
|
|
|
.canvas-wrapper {
|
|
width: 600px;
|
|
height: 400px;
|
|
/* 避免在PC端显示太大 */
|
|
display: inline-block;
|
|
margin: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="main">
|
|
<div class="canvas-wrapper">
|
|
<canvas id="canvas1"></canvas>
|
|
</div>
|
|
<div class="canvas-wrapper">
|
|
<canvas id="canvas2"></canvas>
|
|
</div>
|
|
<br>
|
|
<div class="canvas-wrapper">
|
|
<canvas id="canvas3"></canvas>
|
|
</div>
|
|
<div class="canvas-wrapper">
|
|
<canvas id="canvas4"></canvas>
|
|
</div>
|
|
</div>
|
|
<script src="../lib/schart.min.js"></script>
|
|
<script>
|
|
new Schart('canvas1', {
|
|
type: 'bar',
|
|
title: {
|
|
text: '最近一周各品类销售图',
|
|
},
|
|
bgColor: '#fbfbfb',
|
|
labels: ['周一', '周二', '周三', '周四', '周五'],
|
|
datasets: [{
|
|
label: '家电',
|
|
fillColor: 'rgba(241, 49, 74, 0.5)',
|
|
data: [234, 278, 270, 190, 230]
|
|
}, {
|
|
label: '百货',
|
|
data: [164, 178, 190, 135, 160]
|
|
}, {
|
|
label: '食品',
|
|
data: [144, 198, 150, 235, 120]
|
|
}]
|
|
})
|
|
|
|
new Schart('canvas2', {
|
|
type: 'line',
|
|
title: {
|
|
text: '最近几个月各品类销售趋势图',
|
|
},
|
|
bgColor: '#fbfbfb',
|
|
labels: ['6月', '7月', '8月', '9月', '10月'],
|
|
datasets: [{
|
|
label: '家电',
|
|
data: [234, 278, 270, 190, 230]
|
|
}, {
|
|
label: '百货',
|
|
data: [164, 178, 150, 135, 160]
|
|
}, {
|
|
label: '食品',
|
|
data: [114, 138, 200, 235, 190]
|
|
}]
|
|
})
|
|
|
|
new Schart('canvas3', {
|
|
type: 'pie',
|
|
title: {
|
|
text: '服装品类销售饼状图'
|
|
},
|
|
legend: {
|
|
position: 'left'
|
|
},
|
|
bgColor: '#fbfbfb',
|
|
labels: ['T恤', '牛仔裤', '连衣裙', '毛衣', '七分裤', '短裙', '羽绒服'],
|
|
datasets: [{
|
|
data: [334, 278, 190, 235, 260, 200, 141]
|
|
}]
|
|
})
|
|
|
|
new Schart('canvas4', {
|
|
type: 'ring',
|
|
title: {
|
|
text: '环形三等分'
|
|
},
|
|
showValue: false,
|
|
legend: {
|
|
position: 'bottom',
|
|
bottom: 40
|
|
},
|
|
bgColor: '#fbfbfb',
|
|
labels: ['vue', 'react', 'angular'],
|
|
datasets: [{
|
|
data: [500, 500, 500]
|
|
}]
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |