<!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: 500px;
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 colors = {
gray: '#EBEBEB',
grayDark: '#3F3F3F',
};
// 生成数组的方法
let randomVal = (min, max, num) => {
let aData = [];
for (let i = 0; i < num; i++) {
let val = Math.random() * (max - min) + min;
aData.push(parseInt(val));
}
return aData;
};
let chartConfig = {
type: 'area',
plot: { // 图表样式、动画效果
tooltip: {
text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
backgroundColor: 'white',
bold: true,
borderColor: '#e3e3e3',
borderRadius: '5px',
fontColor: '#2f2f2f',
fontSize: '12px',
padding: '15px',
shadow: true,
shadowAlpha: 0.2,
shadowBlur: 5,
shadowColor: '#a1a1a1',
shadowDistance: 4,
textAlign: 'left',
visible: true,
},
animation: {
delay: 400,
effect: 'ANIMATION_EXPAND_TOP',
method: 'ANIMATION_BOUNCE_EASE_OUT',
sequence: 'ANIMATION_NO_SEQUENCE',
speed: 500,
},
aspect: 'spline',
},
scaleX: { // x轴样式
guide: {
alpha: 1,
lineColor: colors.gray,
lineStyle: 'solid',
},
item: {
color: colors.grayDark,
},
lineColor: colors.gray,
lineWidth: '1px',
tick: {
lineColor: '#C7C7C7',
lineWidth: '1px',
},
},
scaleY: {
guide: {
alpha: 1,
lineColor: colors.gray,
lineStyle: 'solid',
},
item: {
color: colors.grayDark,
},
lineColor: colors.gray,
lineWidth: '1px',
step: 10,
tick: {
lineColor: '#C7C7C7',
lineWidth: '1px',
},
},
series: [{ // 2组数组
values: randomVal(22, 42, 10), // 生成数组
backgroundColor: '#80DEEA',
lineColor: '#80DEEA',
lineWidth: '2px',
marker: {
backgroundColor: '#80DEEA',
},
},
{
values: randomVal(7, 32, 10), // 生成数组
backgroundColor: '#69F0AE',
lineColor: '#69F0AE',
lineWidth: '2px',
marker: {
backgroundColor: '#69F0AE',
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig, // 展示上面的数据
height: '100%',
width: '100%',
});
</script>
</body>
</html>
- 效果图
