将如下数据用折线图表示:

数据分析：

案例效果初步呈现：

案例基础代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./JS/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="./JS/echarts.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div id="main" style="width: 1400px;height: 400px;">
                
            </div>
        </div>
        <script type="text/javascript">
            const app = new Vue({
                el:"#app",
                data(){
                    return {
                        xDataArr:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                        yDataArr:[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600],  //数学成绩
                    }
                },
                mounted() {
                    //初始化echarts实例
                    const myChart = echarts.init(document.getElementById('main'))
                    const option = {
                        xAxis:{ //X轴
                            type:'category', //类目名称
                            data: this.xDataArr
                        },
                        yAxis:{  //y轴
                            type:'value' //数值轴
                        },
                        series:[
                            {
                            name:'康师傅',
                            type:'line',
                            data: this.yDataArr
                            }
                            ]
                    }
                    myChart.setOption(option) //指定的配置项和数据显示图表
                }
            })
        </script>
    </body>
</html>

标记折线图的最大值、最小值、平均值、标注区间

标记最大值与最小值：markPoint
标记平均值：markLine
标注区间：markArea

效果展示：

部分代码：

                            series: [{
                            name: '康师傅',
                            type: 'line',
                            data: this.yDataArr,
                            markPoint: { //标记点
                                data: [
                                    //最大值
                                    {
                                        type: 'max'
                                    },
                                    //最小值
                                    {
                                        type: 'min'
                                    }
                                ]
                            },
                            markLine: { //标记线
                                data: [{
                                    type: 'average' //平均线
                                }]
                            },
                            markArea: {
                                data: [
                                    [{ //第一块区间开始值
                                            xAxis: '一月'
                                        },
                                        { //第一块区间结束值
                                            xAxis: '二月'
                                        }
                                    ],
                                    [{ //第二块区间开始值
                                            xAxis: '六月'
                                        },
                                        { //第二块区间结束值
                                            xAxis: '八月'
                                        }
                                    ]
                                ]
                            }
                        }, ]

开启线条控制：平滑、风格

smooth：让线条看起来平滑一点
lineStyle：调节线条的样式

代码位置：

效果：

左边为未开启smooth风格的折线图

线条样式：

效果：

区间填充风格

areaStyle

代码位置：

效果：

紧挨Y轴边缘

boundaryGap 控制线条边缘距离(true为默认值，false为没有距离)

正常折线图下，我们可以看到线条的起始点离y轴还有一小段的距离。

如果我们要让起始点贴近y轴，就需要使用boundaryGap: false

效果：

缩放：y轴脱离0值比例

scale
如下图所视，一般我们的折线图都是从0值开始。

但有些场合我们不希望从0开始算起，而是由我们的数据当中的最小值决定，这时候就需要我们的scale：true了。

可以看到y轴这里的500是由数据中定义的最小值决定的，而不是默认的从0起步。

堆叠图

stack 避免2条折线出现相交的情况

一般的堆叠图如下：存在相交的情况

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./JS/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="./JS/echarts.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div id="main" style="width: 800px;height: 400px;">

            </div>
        </div>
        <script type="text/javascript">
            const app = new Vue({
                el: "#app",
                data() {
                    return {
                        xDataArr: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        yDataArr1: [3000, 1800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600], //数学成绩
                        yDataArr2: [2800, 900, 1800, 1200, 900, 700, 1400, 1600, 1900, 2000, 1700, 800],
                    }
                },
                mounted() {
                    //初始化echarts实例
                    const myChart = echarts.init(document.getElementById('main'))
                    const option = {
                        xAxis: { //X轴
                            type: 'category', //类目名称
                            data: this.xDataArr,
                            boundaryGap: false //紧挨边缘
                        },
                        yAxis: { //y轴
                            type: 'value' ,//数值轴
                            scale: true //缩放
                        },
                        series: [
                            {
                            name: '康师傅',
                            type: 'line',
                            data: this.yDataArr1,
                            lineStyle:{
                                color:'red'
                            }
                        },
                         {
                            name: '康师傅',
                            type: 'line',
                            data: this.yDataArr2,
                         },
                         ]
                    }
                    myChart.setOption(option) //指定的配置项和数据显示图表
                }
            })
        </script>
    </body>
</html>

使用stack后，不会出现相交，蓝线就以红线为起点算。