<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
min-height: 530px;
width: 650px;
height: 350px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["xxx", "xxx"];
let chartConfig = {
type: 'area',
title: {
text: '标题',
fontColor: '#4caee7',
},
subtitle: {
text: '副标题',
fontColor: '#cb8670',
},
plot: {
activeArea: true,
animation: {
delay: 50,
effect: 'ANIMATION_SLIDE_LEFT',
method: 'ANIMATION_REGULAR_EASE_OUT',
sequence: 'ANIMATION_NO_SEQUENCE',
speed: 1500,
},
hoverMarker: {
size: '8px',
},
stacked: true,
},
plotarea: {
backgroundColor: '#fff',
},
scaleX: { // x轴
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// lineColor: '#333',
// maxItems: 6,
// minValue: 1274313600000,
// step: 600000,
// tick: {
// lineColor: '#333',
// },
// transform: {
// type: 'date',
// all: '%D, %d %M<br>%h:%i %A',
// item: {
// visible: false,
// },
// },
},
scaleY: {
item: {
padding: '4px',
},
lineColor: '#333',
tick: {
lineColor: '#333',
},
},
series: [{ // y轴
values: [11, 36, 7, 44, 11, 28, 42],
backgroundColor: '#cb8670',
lineColor: '#cb8670',
marker: {
backgroundColor: '#cb8670',
borderColor: '#fff',
borderWidth: '2px',
},
},
// {
// values: [21, 29, 14, 16, 28, 35, 21, 18, 11, 7, 4, 9, 25, 15, 33, 13],
// backgroundColor: '#4caee7',
// lineColor: '#4caee7',
// marker: {
// backgroundColor: '#4caee7',
// borderColor: '#fff',
// borderWidth: '2px',
// },
// },
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
点击查看详情
