echarts 折线图

先上图片

自我认为难点

1.折线的不同颜色

color:["#4ff1ff","#91c720","#fa1e7d","#face1f"], //折线颜色
通过将折线图的颜色放到全局引用

2.折线变平滑

symbol:‘none’, //这句就是去掉点的
smooth:true, //这句就是让曲线变平滑的

3.轴刻度下移动

offset:20,//轴显示值对于轴的距离

4.刻度线，网格线，轴线不显示

                    axisLine:{   //轴线
                        show:false
                    },
                    axisTick:{ //轴刻度线
                        show:false
                    },
                    splitLine: { //网格线
                        show: false
                    },

5.折现区域颜色，以及渐变色

                        areaStyle: {          //区域显示
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "rgba(79,241,255,.2)",
                                }, {
                                    offset: 1,
                                    color: '#013879'
                                }])
                            }
                        },

上代码

option = {
                    color:["#4ff1ff","#91c720","#fa1e7d","#face1f"], //折线颜色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        show:true,
                        icon: 'rect',
                        itemWidth: 12,
                        itemHeight: 12,
                        itemGap: 130,  //之间距离
                        textStyle:{
                            fontSize:32,
                            color:"#ffffff",
                        }
                    },
                    grid: {              //布局
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['15:00','15:05','15:10','15:15','15:20','15:25','15:30'],
                        axisLine:{   //轴线
                            show:false
                        },
                        axisTick:{ //轴刻度线
                            show:false
                        },
                        splitLine: { //网格线
                            show: false
                        },

                        axisLabel: {
                            show: true,
                            textStyle:{
                                fontSize:32,
                                color:"#ffffff",
                            }
                        },
                        offset:20,//x轴显示值对于x轴的距离
                    },
                    yAxis: {
                        type: 'value',
                        data:["0","500","1000","1500"],
                        splitLine:{
                            show:true,
                            lineStyle:{
                                color:"#013879",
                                opacity:.7,
                                type:"solid",
                            },
                        },
                        axisLine:{
                            show:false
                        },
                        axisTick:{ //y轴刻度线
                            show:false
                        },
                        axisLabel: {
                            show: true,
                            textStyle:{
                                fontSize:32,
                                color:"#ffffff",
                            }
                        },
                        offset:10,
                    },
                    series: [

                        {
                            name:'评价数',
                            type:'line',
                            symbol:'none',  //这句就是去掉点的
                            smooth:true,  //这句就是让曲线变平滑的
                            data:[120, 400, 200, 134, 90, 230, 210],
                            areaStyle: {          //区域显示
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "rgba(79,241,255,.2)",
                                    }, {
                                        offset: 1,
                                        color: '#013879'
                                    }])
                                }
                            },
                        },
                        {
                            name:'日均线',
                            type:'line',
                            symbol:'none',  //这句就是去掉点的
                            smooth:true,  //这句就是让曲线变平滑的
                            data:[220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name:'日最高峰',
                            type:'line',
                            symbol:'none',  //这句就是去掉点的
                            smooth:true,  //这句就是让曲线变平滑的
                            data:[150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name:'日最低峰',
                            type:'line',
                            symbol:'none',  //这句就是去掉点的
                            smooth:true,  //这句就是让曲线变平滑的
                            data:[320, 332, 301, 334, 390, 330, 320]
                        }
                    ]
                };