Echarts.js 實現折線圖

源鏈接：https://blog.csdn.net/qq_44373419/article/details/93619068

官網：https://www.echartsjs.com/zh/index.html

<div class="echarts" id="years" style="height:300px; height:350px"></div>

<script src="__STATIC__/admin/echarts.min.js" charset="utf-8"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>
    // 基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('years'));

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['蒸發量', '降水量', '平均溫度']
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {
                type: 'value',
                name: '溫度',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name: '蒸發量',
                type: 'bar',
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
                name: '降水量',
                type: 'bar',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name: '平均溫度',
                type: 'line',
                yAxisIndex: 1,
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };

    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);

</script>

//==========示例============

<div id="growth" style="width: 100%;height:333px;"></div>

<script type="text/javascript">
    // 基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('growth'));

    option = {

        // backgroundColor: '#FFF0F5',
        //標題
        // title: {
        //     text: '折線圖',
        //     subtext: '模擬數據',
        //     x: 'center'
        // },

        legend: {
            // orient 設置布局方式，默認水平布局，可選值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            // x 設置水平安放位置，默認全圖居中，可選值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐標，單位px）
            x: 'left',
            // y 設置垂直安放位置，默認全圖頂端，可選值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐標，單位px）
            y: 'top',
            data: ['預期','實際','假設'],
            itemWidth:'100%' //設置圖片寬度itemHeight: 14,// 圖例圖形高度textStyle: {color: '#333' 圖例文字顏色}

        },

        //  圖表距邊框的距離,可選值：'百分比'¦ {number}（單位px）
        grid: {
            top: '20%',   // 等價於 y: '16%'
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },

        // 提示框
        tooltip: {
            trigger: 'axis'
        },

        //工具框，可以選擇
        // toolbox: {
        //     feature: {
        //         saveAsImage: {} //下載工具
        //     }
        // },
        //底部縮放控件
        dataZoom: [{
            type: 'inside',
            start: 0,//百分比
            end: 100
        }, {
            start: 0,
            end: 100,
            handleSize: '100%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
        xAxis: {
            name: '日期',
            type: 'category',
            axisLine: {
                lineStyle: {
                    // 設置x軸顏色
                    color: '#912CEE'
                }
            },
            // 設置X軸數據旋轉傾斜
            axisLabel: {
                rotate: 30, // 旋轉角度
                interval: 0  //設置X軸數據間隔幾個顯示一個，為0表示都顯示
            },
            // boundaryGap值為false的時候，折線第一個點在y軸上
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },

        yAxis: {
            name: '活躍用戶',
            type: 'value',
            min:0, // 設置y軸刻度的最小值
            max:1800,  // 設置y軸刻度的最大值
            splitNumber:9,  // 設置y軸刻度間隔個數
            axisLine: {
                lineStyle: {
                    // 設置y軸顏色
                    color: '#87CEFA'
                }
            },
        },

        series: [
            {
                name: '預期',
                data: [820, 932, 301, 1434, 1290, 1330, 1320],
                type: 'line',
                // 設置小圓點消失
                // 注意：設置symbol: 'none'以后，拐點不存在了，設置拐點上顯示數值無效
                symbol: 'none',
                // 設置折線弧度，取值：0-1之間
                smooth: 0.5,
            },

            {
                name: '實際',
                data: [620, 732, 941, 834, 1690, 1030, 920],
                type: 'line',
                // 設置折線上圓點大小
                symbolSize:8,
                itemStyle:{
                    normal:{
                        // 拐點上顯示數值
                        label : {
                            show: true
                        },
                        borderColor:'red',  // 拐點邊框顏色
                        lineStyle:{
                            width:5,  // 設置線寬
                            type:'dotted'  //'dotted'虛線 'solid'實線
                        }
                    }
                }
            },

            {
                name: '假設',
                data: [120, 232, 541, 134, 290, 130, 120],
                type: 'line',
                // 設置折線上圓點大小
                symbolSize:10,
                // 設置拐點為實心圓
                symbol:'circle',
                itemStyle: {
                    normal: {
                        // 拐點上顯示數值
                        label : {
                            show: true
                        },
                        lineStyle:{
                            // 使用rgba設置折線透明度為0，可以視覺上隱藏折線
                            color: 'rgba(0,0,0,0)'
                        }
                    }
                }
            }
        ],

        color: ['#00EE00', '#FF9F7F','#FFD700']
    };

    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);

</script>