![]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style type="text/css">
#main{
width: 800px;
height:600px;
}
</style>
<script crossorigin="anonymous" integrity="sha384-xtrmUNWJ2tdS4FJyVhTG4xpPXkfHBFY36SOeegdD40rRPQOCNBfiaxPY1ji+RKS2" src="https://lib.baomitu.com/echarts/3.8.5/echarts.min.js"></script>
</head>
<body>
<div id="main" style=""></div>
<script type="text/javascript">
let myChart = echarts.init(document.getElementById('main'));
let sData = [
['2020-04-09 02:00:00', 36],
['2020-04-09 02:30:00', 73],
['2020-04-09 03:00:00', 35],
['2020-04-09 03:30:00', 36],
['2020-04-09 04:00:00', 36],
['2020-04-09 04:30:00', 35],
['2020-04-09 05:00:00', 33],
['2020-04-09 05:30:00', 37],
['2020-04-09 06:00:00', 43],
['2020-04-09 06:30:00', 63],
]
let sData1 = [
['2020-04-09 02:00:00', 32],
['2020-04-09 02:30:00', 33],
['2020-04-09 03:00:00', 53],
['2020-04-09 03:30:00', 53],
['2020-04-09 04:00:00', 53],
['2020-04-09 04:30:00', 33],
['2020-04-09 05:00:00', 63],
['2020-04-09 05:30:00', 53],
['2020-04-09 06:00:00', 86],
['2020-04-09 06:30:00', 23],
]
let option = {
tooltip: {
trigger: 'axis',
},
legend: {
data: [ 'legend11', 'legend22'],
icon: 'circle',
bottom: 'bottom',
selectedMode: false
},
xAxis: [
{
type: 'time',
axisPointer: {
type: 'shadow'
},
axisLine: { // 軸線
show: false
},
axisTick: { // 刻度線
show: false
},
axisLabel: { // 刻度數值
color: '#000'
},
splitLine: {
show: false
},
}
],
yAxis: [
{
type: 'value',
name: '系列名1',
axisLabel: {
formatter: '{value}'
},
axisTick: {
show: false
},
axisLine: {
// y軸線不顯示
show: false,
},
scale:true,
},
{
type: 'value',
name: '系列名2',
axisLabel: {
formatter: '{value}'
},
axisTick: {
show: false
},
axisLine: {
// y軸線的顏色以及寬度
show: false,
lineStyle: {
color: '#FF6073'
}
},
scale:true,
}
],
dataZoom: [{
type: 'inside',
// minSpan: 5, // 這個最好根據數據條數定
minValueSpan: 3600000, // 時間軸左側到右側最多可以縮放到一小時
}],
series: [
{
name: 'legend11',
type: 'bar',
data: sData,
barWidth: '20%',
itemStyle: {
normal: {
// 設置柱子的漸變色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#729AFE'
},
{
offset: 1,
color: '#6477FE'
}
]),
barBorderRadius: 2,
}
},
},
{
name: 'legend22',
type: 'line',
yAxisIndex: 1,
data: sData1,
lineStyle: {
normal: {
width: 3,
color: '#FF6073'
}
},
itemStyle: {
normal: {
color: '#FF6073',
borderWidth: 3,
borderColor: '#FF6073'
}
},
smooth: false,
showSymbol: false,
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
