<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
<script src="echarts.min.js"></script>
<title></title>
<style>
</style>
</head>
<body>
<div class="chart" id="main" style="width: 600px; height: 400px;"></div>
<script>
// Based ready dom, instance initialization echarts
var myChart = echarts.init(document.getElementById('main'));
// specify the configuration item data and charts
the option = {
animation: false,
tooltip: {
trigger: 'axis'
},
grid: { top: 5, bottom: 5, left: 5, right: 5 },
xAxis: {
type: 'category',
show: false, // do not show abscissa
splitLine: { show: false },
data: ['20191013', '20191014', '20191015', '20191016', '20191017', '20191018', '20191019']
},
yAxis: {
type: 'value',
show: false,
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false },
scale: true
},
series: [{
// series: a set of values and their mapping into the map
type: 'line',
name: 'sales'
symbol: 'none',
smooth: true,
color: ['#6FA9FA'],
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#6FA9FA' },
{ offset: 1, color: '#fff' }
])
}
},
data: ['0', '0', '1', '0', '2', '0', '0']
}],
};
// just use the specified configuration items and data charts.
myChart.setOption(option);
</script>
</body>
</html>