特效描述：利用HTML5实现 数据曲线 走势图表代码。利用HTML5实现数据曲线走势图表代码

代码结构

1. 引入JS

2. HTML代码

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;

}