ECharts_折线图

3.2折线图

实现步骤

Echarts最基本的代码结构
- 引入js文件
- DOM容器
- 初始化对象
- 设置option
设置x轴、y轴数据
图表类型：在series下设置 type: 'line'

3.2.1 常见效果

标记：最大值最小值平均值标注区间
线条控制：平滑风格 smooth lineStyle
填充风格 areaStyle
紧挨边缘 boundaryGap: false
缩放：脱离0值的比例 scale: true
堆叠图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;"></div>

    <script>
        var mCharts = echarts.init(document.querySelector('div'));

        var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
        var yDataArr2 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300, 1900, 1500, 1800, 200]

        var option = {
            xAxis: {
                type: 'category',
                data: xDataArr,
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                scale: true
            },
            series: [
                {
                    name: '康师傅',
                    type: 'line',
                    data: yDataArr,
                    smooth: true,
                    areaStyle: {
                        color: 'pink'
                    },
                    stack: 'all'
                },
                {
                    name: '统一',
                    type: 'line',
                    data: yDataArr2,
                    smooth:true,
                    areaStyle: {
                        color: 'grey'
                    },
                    stack: 'all'
                }
            ]
        }

        mCharts.setOption(option)

    </script>
</body>
</html>