下面是代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基于 ApexCharts 的 HTML5 曲线图表DEMO演示</title><style>
body {background: #000524;
}#wrapper {padding-top: 20px;background: #000524;border: 1px solid #000;box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.71);max-width: 650px;margin: 35px auto;
}#chart-bar {position: relative;margin-top: -38px;
}
</style></head>
<body><script src="js/apexcharts.js"></script><div id="wrapper"><div id="chart-area"></div><div id="chart-bar"></div>
</div><script>
var data = generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, {min: 30,max: 90
});
var options1 = {chart: {id: "chart2",type: "area",height: 230,foreColor: "#ccc",toolbar: {autoSelected: "pan",show: false}},colors: ["#00BAEC"],stroke: {width: 3},grid: {borderColor: "#555",yaxis: {lines: {show: false}}},dataLabels: {enabled: false},fill: {gradient: {enabled: true,opacityFrom: 0.55,opacityTo: 0}},markers: {size: 5,colors: ["#000524"],strokeColor: "#00BAEC",strokeWidth: 3},series: [{data: data}],tooltip: {theme: "dark"},xaxis: {type: "datetime"},yaxis: {min: 0,tickAmount: 4}
};var chart1 = new ApexCharts(document.querySelector("#chart-area"), options1);chart1.render();var options2 = {chart: {id: "chart1",height: 130,type: "bar",foreColor: "#ccc",brush: {target: "chart2",enabled: true},selection: {fill: {color: "#fff",opacity: 0.4},xaxis: {min: new Date("27 Jul 2017 10:00:00").getTime(),max: new Date("14 Aug 2017 10:00:00").getTime()}}},colors: ["#FF0080"],series: [{data: data}],stroke: {width: 2},grid: {borderColor: "#444"},markers: {size: 0},xaxis: {type: "datetime",tooltip: {enabled: false}},yaxis: {tickAmount: 2}
};var chart2 = new ApexCharts(document.querySelector("#chart-bar"), options2);chart2.render();function generateDayWiseTimeSeries(baseval, count, yrange) {var i = 0;var series = [];while (i < count) {var x = baseval;var y =Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;series.push([x, y]);baseval += 86400000;i++;}return series;
}
</script><div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div></body>
</html>apexcharts.js
由于代码太长了用链接方式下载吧
链接: https://pan.baidu.com/s/1T_LIV2_ey2yEbe0cwOFtmA?pwd=wvbf 提取码: wvbf
下面是运行效果：
