console
const chart = echarts.init(document.querySelector('.chart'))
const option = {
xAxis: {
type: 'category',
boundaryGap: false, // 坐标轴两边不要留白
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
axisLabel: {
show: true,
textStyle: {
color: '#63779a'
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#63779a',
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#63779a'
},
},
splitLine: {
show: true,
lineStyle:{
color: ['#e7e7e7'],
width: 1,
type: 'dotte'
}
},
axisLine: { show: false },
axisTick: { show: false },
},
legend: {
data: ['停机次数'],
left: 99999, // 隐藏 legend
},
tooltip : {
trigger: 'axis',
formatter: function(data) {
console.log(data)
data = data[0]
return data.name + '</br>' + data.seriesName + '：' + data.data
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: {
color: '#b4cefe',
},
},
textStyle: {
fontSize: 12,
}
},
grid: {
height: '78%',
width: '82%',
x: '13%',
y: '10%',
},
series: [{
showSymbol: false, // 鼠标悬浮显示圆点
data: [820, 932, 901, 934, 1290, 1330, 1320],
name: '停机次数',
type: 'line',
// smooth: true, 平滑曲线
lineStyle: {
color: '#2265d5'
},
itemStyle: {
color: '#2265d5'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: '#a6c4f8' // 0% 处的颜色
},
{
offset: 1, color: '#f0f4fb' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}]
}
chart.setOption(option)
<!DOCTYPE html>
<html>
<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">
<title>demo</title>
<script crossorigin="anonymous" integrity="sha384-DX1FVVXdGcNR016Jj6c5WuxYmyUvkb2/0ZMXKwbXaXs8j9tPs3e4RUjNg4tViEj4" src="https://lib.baomitu.com/echarts/4.7.0/echarts-en.common.js"></script>
</head>
<body>
<div class="chart"></div>
</body>
</html>
body {
background: #fff;
}
.chart {
width: 400px;
height: 400px;
}