echarts折線圖繪製

 

<div id="main" style="width: 250px;height:200px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // 指定圖表的配置項和數據
        var option = {
            tooltip : {  //提示框
                trigger: 'axis',  //觸發類型(座標軸觸發)
                alwaysShowContent:false,  //是否永遠顯示提示框的內容
                backgroundColor:'rgba(32,174,252,0.7)', //提示框的背景顏色
                textStyle:{  //提示框浮層的文本樣式


                },
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    name:'(月)',        //X軸名稱單位
                    nameLocation:'end', //名稱的位置
                    nameTextStyle:{     //名稱的樣式
                        color:'#999',
                        fontSize:'12px'
                    },
                    nameGap:0,  //名稱與X軸的距離
                    boundaryGap: true,//座標的刻度是否在中間
                    min:'3',//座標軸刻度最小值
                    max:'dataMax', //座標軸刻度的最大值
                    axisLine:{//座標軸線條相關設置(顏色等)
                        lineStyle:{
                            color:'#ccc'
                        }
                    },
                    axisTick:{ //座標軸刻度相關設置
                        length:'0' //我把長度設置成0了
                    },
                    axisLabel:{ //座標軸刻度標籤
                        margin:7, //刻度標籤與軸線之間的距離
                        textStyle:{
                            color:"#999",  //座標軸刻度文字的顏色
                            fontSize:'12px' //座標軸刻度文字的大小
                        }
                    },
                    data : ['3','4','5','6','7','8','9','10']

                }
            ],//X軸設置
            yAxis : [
                {
                    type : 'value', //類型數值軸
                    name:'(人)',    //座標軸名稱
                    nameTextStyle:{     //名稱的樣式
                        color:'#999',
                        fontSize:'12px'
                    },
                    nameGap:3,  //名稱與Y軸的距離
                    axisTick:{ //座標軸刻度相關設置
                        length:'0' //我設置成0了
                    },
                    axisLine:{//座標軸線條相關設置(顏色等)
                        lineStyle:{
                            color:'#ccc'
                        }
                    },
                    axisLabel:{//座標軸標籤相關設置,距離顏色等
                        margin:7,
                        //formatter: '{value} °C',//標籤內容內置的格式轉化器好比這個表示在後面加一個c
                        textStyle:{
                            color:"#999",  //座標軸刻度文字的顏色
                            fontSize:'12px' //座標軸刻度文字的大小
                        },
                    },
                    splitLine:{    //座標軸分隔線。默認數值軸顯示，類目軸不顯示。
                        show:false
                    }
                }
            ],
            grid:{ //直角座標系內繪圖網格
                left:36  //因爲1000顯示被擋住了,因此我讓他左移36px;這個功能相似於paddingleft
            },
            series : [  //系列列表
                {
                    name:'人',   //系列名稱 用於tooltip的顯示
                    type:'line',
                    data:[360, 500, 400, 600, 530, 840, 540,350],
                    itemStyle:{  //折線拐點的樣式
                        normal:{
                            color:'#20aefc',  //折線拐點的顏色
                        }
                    },
                    lineStyle:{  //線條的樣式
                        normal:{
                            color:'#20aefc',  //折線顏色
                        }
                    },
                    areaStyle:{ //區域填充樣式
                        normal:{
                            //線性漸變
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: '#b1e3fe' // 0% 處的顏色
                            }, {
                                offset: 1, color: '#fff' // 100% 處的顏色
                            }], false)
                        }
                    },
                    markPoint : { //圖標標註
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }

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