<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="./zingchart.min.js"></script>
<style>
.zc-html,
.zc-body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.chart--container {
height: 350px;
width: 500px;
/* min-height: 530px; */
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["xxx", "xxx"];
let chartConfig = {
type: 'range',
series: [{
values: [
[15, 30],
[20, 40],
[16, 35],
[21, 30],
[25, 45],
[18, 27],
[23, 35],
[29, 39],
[27, 30],
[19, 34],
],
},
{
values: [
[25, 35],
[12, 40],
[19, 30],
[26, 27],
[12, 35],
[31, 39],
[52, 59],
[29, 36],
[21, 25],
[9, 29],
],
},
{
values: [
[40, 45],
[30, 43],
[35, 36],
[41, 50],
[50, 54],
[45, 52],
[39, 42],
[31, 40],
[41, 49],
[35, 40],
],
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
- 效果图
