echarts图之折线图中各种参数的含义以及设置方法

先上效果图

效果图.jpg
代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>echarts折线图</title>
    <style>
        /*注意必须要给echarts图存放的父元素设置高度  也可以设置宽度*/
        #line {
            width: 700px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="" id="line"></div>
</body>
<script src="./js/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('line'));
    var option = {
        title: {
            text: '折线图',
            left: 'center',
            textStyle: { //标题内容的样式
                color: '#000',
                fontStyle: 'normal',
                fontWeight: 100,
                fontSize: 16 //主题文字字体大小，默认为18px
            },
        },
        color: ['red'],//给折线图设置颜色  可以在这里设置 也可以在series里面设置 二选一
        grid: {//设置柱状图位置   上下左右距离也可以用   y y2 x x2 表示 可以用百分比表示也可以直接数字  例如 x:20
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true  // 表示grid 区域是否包含坐标轴的刻度标签 常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件
        },
        tooltip: {
            trigger: 'axis', //设置鼠标划过时显示信息  如果不设置  不显示坐标轴指示器
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'cross' // 默认为直线，可选为：'line'线型 | 'shadow'阴影 | 'cross'十字交叉坐标轴指示器
            },
            formatter: function (params) {
                // pc端鼠标滑过和点击时都触发  手机端点击屏幕时触发
                console.log(params[0].value)
            }
        },
        xAxis: {
            type: 'category',
            splitLine: {
                show: false // 是否显示分隔线  默认为false 不显示
            },
            axisLabel: {
                show: true, // 是否显示刻度标签 默认为true 显示
                textStyle: { // 改变刻度标签的样式
                    color: '#999',
                    fontSize: '12'
                }
            },
            axisTick: {
                show: true, // 是否显示坐标轴刻度 默认为true 显示
                alignWithLabel: true //坐标轴刻度与标签对齐  如果不设置 默认坐标刻度与刻度标签不对齐
            },
            axisLine: { // 改变坐标轴样式
                lineStyle: {
                    color: '#e1e1e1',
                    width: 1
                }
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            splitLine: { // 分隔线样式
                lineStyle: {
                    type: 'dashed'  // 改变分隔线样式为虚线 默认是直线
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#999',
                    fontSize: '12'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#e1e1e1',
                    width: 1
                }
            }
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            symbol: 'circle',  // 拐点设置为实心圆点 默认是空心圆点 ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'  可以通过 'image://url' 设置为图片，其中 URL 为图片的链接
            symbolSize: 8, // 拐点圆的大小
            color: ['red'], // 折线条的颜色
            smooth: false, // 是否显示平滑曲线  默认为false 如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5 
            itemStyle: {
                normal: {
                    lineStyle: {
                        width: 2,
                        type: 'dotted'  //'dotted'虚线 'solid'实线
                    }
                }
            }
        }]
    };
    myChart.setOption(option);
</script>

</html>