SOURCE

console 命令行工具 X clear

                    
>
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;
}